简单实现签到日历效果
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}}"> </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