简单实现签到日历效果
发布于 4 年前 作者 jsun 4434 次浏览 来自 分享

wxml:

<view class="box">
  <view class="section">
    <picker mode="date" value="{{date}}" fields="month" start="2010-01-01" end="{{cy+'-'+cm}}"
      bindchange="bindDateChange">
      <view class="picker">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
    </picker>
  </view>
  <view>
    <!-- 显示星期 -->
    <view class="week color9b">
      <view wx:for="{{weeks_ch}}" wx:key="unique">{{item}}</view>
    </view>
    <view class='days'>
      <!-- 行 -->
      <view class="rows" wx:for="{{days.length/7}}" wx:for-index="i" wx:key="unique">
        <!-- 列 -->
        <view class="columns" wx:for="{{7}}" wx:for-index="k" wx:key="unique">
          <!-- 每个月份的空的单元格 -->
          <view class='cell' wx:if="{{days[7*i+k].date == null}}">
            <text decode="{{true}}">&nbsp;&nbsp;</text>
          </view>
          <!-- 每个月份的有数字的单元格 -->
          <view class='cell' wx:else>
            <!-- 当前日期已签到 -->
            <view wx:if="{{days[7*i+k].isSign == true}}" class='qianbg'>
              <text class="colorff">{{days[7*i+k].date}}</text>
              <text class="sourse">+{{days[7*i+k].Score}}</text>
            </view>
            <!-- 当前日期未签到 -->
            <view wx:else>
              <text>{{days[7*i+k].date}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>


简单提下思路,首先默认确定当前年月,cy cm, 初始化:获取days遍历日历的格子,通过获取当前月第一天是星期几来判断前面有几个空格,放入days,再当月天数放入days,然后进行渲染,再通接口去拿签到信息,签到成功的突出显示。这里签到初始化时我默认给了标识isSign,将已签到列表和当前年月日进行比较,符合条件则更新签到状态。切换选择日期,这里我用的是选择器,当然可以写成点击左侧按钮上一月,右侧按钮下一月那种,重新选择日期后,initdata(e) 传入年月,就是当前选择年月的数据。有些喜欢将星期日放前面的我也备注上去了。样式根据自己的喜好改就行了,最后看看我写的两个项目效果

写了个demo:https://developers.weixin.qq.com/s/SSlwjGmb7Wm9



1 回复

这个很实用啊

回到顶部