预览图
运行代码 代码资源包
wxml
签到头部
为了方便，我在这里写了两个头部，已签到用这种
<view class="headers_wrapper" wx:if="{{signtype=='2'}}"> <view class="for_headerleft"><image src="../../images/calendar2.png" ></image></view> <view class="for_headerright"> <view class="for_headerright_list">今日已签到</view> <view class="for_headerright_list1">已连续签到<span>{{seriesCount}}</span>天 </view> <view class="for_headerright_list2">再连续签到<span>{{series_gos}}</span>天即可获得更多奖励</view> </view></view>
未签到
<view class="headers_wrapper" wx:if="{{signtype=='1'}}"> <view class="for_headerleft"><image src="../../images/calendar1.png" ></image></view> <view class="for_headerright"> <view class="for_headerright_list">今日未签到</view> <view class="for_headerright_list1">已连续签到<span>{{seriesCount}}</span>天 </view> <view class="for_headerright_list2">再连续签到<span>{{series_gos}}</span>天即可获得更多奖励</view> </view></view>
日历wxml
<view class="containers"> <view class="clearPadding"> <view class="calendar"> <view class="calen_header"> <button class='calendar_month_prev' bindtap="sign_prev"> <image src="../../images/cle_btn.png" bindtap="sign_prev"></image> </button> <button class='calendar_month_next' bindtap="sign_next"> <image src="../../images/cle_btn.png" ></image> </button> </view> <view class="calenbox"> <view class="calendar_thisday"> <text>{{showYear}}</text>年<text>{{showMonth}}</text>月 </view> </view> <view class="calendar_wrapper"> <view class="week_day"> <view class="weeklist">日</view> <view class="weeklist">一</view> <view class="weeklist">二</view> <view class="weeklist">三</view> <view class="weeklist">四</view> <view class="weeklist">五</view> <view class="weeklist">六</view> </view> <view> <view class="month_day"> <view class="day_list" wx:for="{{signDays[0]}}" wx:key="un" wx:for-index="index" wx:for-item="item">{{item == null ? '' : item.normalday}} <view class="day_hover" wx:if="{{item.signday=='is'}}"></view> </view> </view> <view class="month_day"> <view class="day_list" wx:for="{{signDays[1]}}" wx:key="un" wx:for-index="index" wx:for-item="item">{{item == null ? '' : item.normalday}}<view class="day_hover" wx:if="{{signs.indexof(item)>-1}}"></view> <view class="day_hover" wx:if="{{item.signday=='is'}}"></view> </view> </view> <view class="month_day"> <view class="day_list" wx:for="{{signDays[2]}}" wx:key="un" wx:for-index="index" wx:for-item="item">{{item == null ? '' : item.normalday}} <view class="day_hover" wx:if="{{item.signday=='is'}}"></view> </view> </view> <view class="month_day"> <view class="day_list" wx:for="{{signDays[3]}}" wx:key="un" wx:for-index="index" wx:for-item="item">{{item == null ? '' : item.normalday}} <view class="day_hover" wx:if="{{item.signday=='is'}}"></view> </view> </view> <view class="month_day"> <view class="day_list" wx:for="{{signDays[4]}}" wx:key="un" wx:for-index="index" wx:for-item="item">{{item == null ? '' : item.normalday}} <view class="day_hover" wx:if="{{item.signday=='is'}}"></view> </view> </view> <view class="month_day"> <view class="day_list" wx:for="{{signDays[5]}}" wx:key="un" wx:for-index="index" wx:for-item="item">{{item == null ? '' : item.normalday}} <view class="day_hover" wx:if="{{item.signday=='is'}}"></view> </view> </view> </view> <!--控制月份日历输出--> </view> <view class="text-center" wx:if="{{signtype=='1'}}"> <button class="btn-qiandao" bindtap="sign_start" >签到</button> </view> <view class="text-center" wx:if="{{signtype=='2'}}"> <button class="btn-qiandao1" bindtap="sign_end" >已签到</button> </view> </view> </view></view>
签到奖励部分，略。
js:
data部分
data: { signDay:[{"signDay":"9"},{"signDay":"11"},{"signDay":"12"},{"signDay":"15"}], signs:[1,2,3,5,6,7], signtype:"1", signDays:[], todayDate:"1", todayMonth:"", todayYear:"", nextMonth:"", nextYear:"", prevYear:"", prevMonth:"", seriesCount:"99", series_gos:"15", for_signs:"none", powerData:"0",},
调用自己画的日历js
var yangdate = require("../../utils/sign_in_ss.js");
// /**// *// * @authors 杨京葛 (1141407871@qq.com)// * @date 2018-05-21 19:26:19// * @version $v1.01$// */////// }var yang_date = { //iyear年份 //iMonth月份 //that //iyear年份 bulidCal : function(iYear, iMonth,that,signday) { var that =that; var aMonth = new Array(); aMonth[0] = new Array(7); aMonth[1] = new Array(7); aMonth[2] = new Array(7); aMonth[3] = new Array(7); aMonth[4] = new Array(7); aMonth[5] = new Array(7); var dCalDate = new Date(iYear, iMonth - 1, 1); var iDayOfFirst = dCalDate.getDay(); //判断当前月份第一天周几 var curMonthDays = new Date(dCalDate.getFullYear(), (dCalDate.getMonth()+1), 0).getDate(); //判断当前月份有多少天 console.log("本月共有 "+ curMonthDays +" 天"); console.log("本月第一天周 "+ iDayOfFirst); var iDaysInMonth = (iMonth, iYear); var iVarDate = 1; var d, w; for (d = iDayOfFirst; d < 7; d++) {console.log(signday); if(signday.indexOf(iVarDate)>-1){ //console.log(111); aMonth[0][d] = { signday:"is", normalday:iVarDate, }; }else{ //console.log(22); aMonth[0][d] = { signday:"nois", normalday:iVarDate, }; } iVarDate++; } //处理每月第一天出现位置 for (w = 1; w < 6; w++) { for (d = 0; d < 7; d++) { if (iVarDate <= iDaysInMonth) { if(signday.indexOf(iVarDate)>-1){ //console.log(111); aMonth[w][d] = { signday:"is", normalday:iVarDate, }; }else{ //console.log(22); aMonth[w][d] = { signday版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。
