用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    郁闷
    2017-6-29 17:34
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    77

    主题

    104

    帖子

    10万

    金钱

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    优秀版主

    2017-1-16 17:24:33 cyk 管理员 楼主 23413761
    小程序很火,但是现有的很多web插件都是操作DOM的,导致不能直接使用,最近需要弄个小程序日历,故而分享出来,大家相互交流。
    可以左右切换,GIF工具掉咯,就传个静态图吧,大家自己下载体验



    js文件
    [AppleScript] 纯文本查看 复制代码
    const conf = {
      data: {
        // hasEmptyGrid 变量控制是否渲染空格子,若当月第一天是星期天,就不应该渲染空格子
        hasEmptyGrid: false
      },
      // 控制scroll-view高度
      getSystemInfo() {
        try {
          const res = wx.getSystemInfoSync();
          this.setData({
            scrollViewHeight: res.windowHeight * res.pixelRatio || 667
          });
        } catch (e) {
          console.log(e);
        }
      },
      // 获取当月共多少天
      getThisMonthDays(year, month) {
        return new Date(year, month, 0).getDate();
      },
      // 获取当月第一天星期几
      getFirstDayOfWeek(year, month) {
        return new Date(Date.UTC(year, month - 1, 1)).getDay();
      },
      // 计算当月1号前空了几个格子
      calculateEmptyGrids(year, month) {
        const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
        let empytGrids = [];
        if (firstDayOfWeek > 0) {
          for (let i = 0; i < firstDayOfWeek; i++) {
            empytGrids.push(i);
          }
          this.setData({
            hasEmptyGrid: true,
            empytGrids
          });
        } else {
          this.setData({
            hasEmptyGrid: false,
            empytGrids: []
          });
        }
      },
      // 绘制当月天数占的格子
      calculateDays(year, month) {
        let days = [];
        const thisMonthDays = this.getThisMonthDays(year, month);
        for (let i = 1; i <= thisMonthDays; i++) {
          days.push(i);
        }
        this.setData({
          days
        });
      },
      // 初始化数据
      onLoad(options) {
        const date = new Date();
        const cur_year = date.getFullYear();
        const cur_month = date.getMonth() + 1;
        const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
        this.calculateEmptyGrids(cur_year, cur_month);
        this.calculateDays(cur_year, cur_month);
        this.getSystemInfo();
        this.setData({
          cur_year,
          cur_month,
          weeks_ch
        })
      },
      // 切换控制年月
      handleCalendar(e) {
        const handle = e.currentTarget.dataset.handle;
        const cur_year = this.data.cur_year;
        const cur_month = this.data.cur_month;
        if (handle === 'prev') {
          let newMonth = cur_month - 1;
          let newYear = cur_year;
          if (newMonth < 1) {
            newYear = cur_year - 1;
            newMonth = 12;
          }
     
          this.calculateDays(newYear, newMonth);
          this.calculateEmptyGrids(newYear, newMonth);
     
          this.setData({
            cur_year: newYear,
            cur_month: newMonth
          })
     
        } else {
          let newMonth = cur_month + 1;
          let newYear = cur_year;
          if (newMonth > 12) {
            newYear = cur_year + 1;
            newMonth = 1;
          }
     
          this.calculateDays(newYear, newMonth);
          this.calculateEmptyGrids(newYear, newMonth);
     
          this.setData({
            cur_year: newYear,
            cur_month: newMonth
          })
        }
      },
      onShareAppMessage() {
        return {
          title: '小程序日历',
          desc: '还是新鲜的日历哟',
          path: 'pages/index/index'
        }
      }
    };
     
    Page(conf);

    wxml文件
    [AppleScript] 纯文本查看 复制代码
    <scroll-view scroll-y="true" class="flex box box-tb box-pack-center box-align-center" style="height: {{scrollViewHeight*2}}rpx">
      <view class="calendar pink-color box box-tb">
            <view class="top-handle fs28 box box-lr box-align-center box-pack-center">
                <view class="prev box box-rl" bindtap="handleCalendar" data-handle="prev">
                    <view class="prev-handle box box-lr box-align-center box-pack-center">《</view>
                </view>
                <view class="date-area box box-lr box-align-center box-pack-center">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
                <view class="next box box-lr" bindtap="handleCalendar" data-handle="next">
                    <view class="next-handle box box-lr box-align-center box-pack-center">》</view>
                </view>
            </view>
            <view class="weeks box box-lr box-pack-center box-align-center">
                <view class="flex week fs28" wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
            </view>
            <view class="days box box-lr box-wrap">
                <view wx:if="{{hasEmptyGrid}}" class="grid white-color box box-align-center box-pack-center" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}">
                </view>
                <view class="grid white-color box box-align-center box-pack-center" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}">
                    <view class="day {{index >= 5 && index <= 13 ? 'border-radius pink-bg' : ''}} box box-align-center box-pack-center">{{item}}</view>
                </view>
            </view>
        </view>
    </scroll-view>

    附件下载
    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    啥也不说了,感谢楼主分享哇!
    啥也不说了,感谢楼主分享哇!
    啥也不说了,感谢楼主分享哇!
    水水水水水水水水水水水水水水水水水水水
    谢谢楼主 ~
    使用道具 举报 回复
    这个没玩过,怎么样
    11111111111111111111111
    谢谢楼主的分享!!!!
    感谢分享,多谢楼主
    *滑动验证:
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X