左右翻页，上一月下一月模式的 wxml
<view class='bg-white'> <view class="flex text-center align-center text-xl padding-tb-sm"> <view class="flex-sub cuIcon-back" bindtap='lastMonth'></view> <view class="flex-sub text-black text-xl">{{year}}年{{month<10?'0'+month:month}}月</view> <view class="flex-sub cuIcon-right" bindtap='nextMonth'></view> </view> <view class='bg-gray flex padding-tb-xs text-lg'> <view class="flex-sub text-center" wx:for='{{week}}' wx:key="item">{{item}}<view></view></view> </view> <view class='cf'></view> <view class='date-box'> <view wx:for='{{dateArr}}' class="{{item.dateNum==selectedDate?'bg-green':''}}" bindtap="selectDate" data-date="{{item}}" wx:key="dateNum"> <view class="text-xl text-content {{item.dateNum==selectedDate?'text-white':'text-black'}}">{{item.dateNum}}</view> <view class="{{item.dateNum==selectedDate?'text-white':'text-grey'}} text-sm text-content" wx:if="{{item.canbook}}">剩余{{item.canbook}}</view> <view class='text-lg text-content text-yellow {{item.uhrd_adult_price?"text-price":""}}' wx:if="{{item.uhrd_adult_price}}">{{item.uhrd_adult_price}}</view> </view> </view> </view>css
.date-box{ height: auto; width: auto; border-left: 1rpx solid #D9D9D9; border-top: 1rpx solid #D9D9D9; } .date-box>view{ position: relative; display: inline-block; width: 14.28571428571429%; height: 145rpx; text-align: center; vertical-align: middle; box-sizing: border-box; border-right: 1rpx solid #D9D9D9; border-bottom: 1rpx solid #D9D9D9; }js
let now = new Date(); util.requestUrl({ url: " ",//从服务器获取参数 data: { ushr_id: ushrId }, method: "get", success: function (res) { that.dateInit(now.getFullYear(), now.getMonth(), res.data.msg);//放在success里+that.xx()才能先赋值再执行xx函数，避免空值！ that.setData({ year: now.getFullYear(), month: now.getMonth() + 1, }); } }); dateInit: function (setYear, setMonth,msg) { holiday_days = msg; console.log(holiday_days); //全部时间的月份都是按0~11基准，显示月份才+1 let dateArr = []; //需要遍历的日历数组数据 let arrLen = 0; //dateArr的数组长度 let now = setYear ? new Date(setYear, setMonth) : new Date(); let year = setYear ? setYear: now.getFullYear(); let nextYear = 0; let month = setMonth ? setMonth: now.getMonth(); //没有+1方便后面计算当月总天数 let month2 = util.add0(month + 1); let nextMonth = (month + 1) > 11 ? 1 : (month + 1); let startWeek = new Date(year + '/' + month2 + '/' + 1).getDay(); //目标月1号对应的星期 let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天 let obj = {}; let num = 0; let hotlen = holiday_days.length; console.log(hotlen); if (month + 1 > 11) { nextYear = year + 1; dayNums = new Date(nextYear, nextMonth, 0).getDate(); } arrLen = startWeek + dayNums; for (let i = 0; i < arrLen; i++) { if (i >= startWeek) { num = i - startWeek + 1; if (num < 10) num = '0' + num; obj = { dateNum: num, }//没有价格的日历数组（先将主要循环放前面，避免被覆盖）！ let isToday = '' + year + month2 + num; for (let ii = 0; ii < hotlen; ii++) { let godate = util.formatTimeTwo(holiday_days[ii]['uhrd_go_date'], 'YMD'); if (godate == isToday) { obj = { dateNum: num, uhrd_room_price: holiday_days[ii]['uhrd_room_price'], uhrd_id: holiday_days[ii]['uhrd_id'], uhrd_adult_price: holiday_days[ii]['uhrd_adult_price'], uhrd_babe_price: holiday_days[ii]['uhrd_babe_price'], canbook: holiday_days[ii]['uhrd_biggest_num'] - holiday_days[ii]['sold_out']//可收-已售=剩余 }//根据YYYYMMDD出发日期格式赋值价格 } } } else { obj = {}; } dateArr[i] = obj; } this.setData({ dateArr: dateArr, }) }, lastMonth: function () { //全部时间的月份都是按0~11基准，显示月份才+1 let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year; let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2; this.setData({ year: year, month: (month + 1), //重置已选 selectedDate: '', price_adult: 0, price_children: 0, uhrd_room_price: 0 }) this.dateInit(year, month, holiday_days); }, nextMonth: function () { //全部时间的月份都是按0~11基准，显示月份才+1 let year = this.data.month > 11 ? this.data.year + 1 : this.data.year; let month = this.data.month > 11 ? 0 : this.data.month; this.setData({ year: year, month: (month + 1), //重置已选 selectedDate: '', price_adult: 0, price_children: 0, uhrd_room_price: 0 }) this.dateInit(year, month, holiday_days); }, selectDate: function (e) { if (e.currentTarget.dataset.date.uhrd_adult_price > 0) { console.log('选中', e.currentTarget.dataset.date.dateNum, '号');//date price_adult = e.currentTarget.dataset.date.uhrd_adult_price, uhrdId = e.currentTarget.dataset.date.uhrd_id, uhrd_room_price = e.currentTarget.dataset.date.uhrd_room_price, price_children = e.currentTarget.dataset.date.uhrd_babe_price, canbook = e.currentTarget.dataset.date.canbook, this.setData({ selectedDate: e.currentTarget.dataset.date.dateNum, price_adult: price_adult, price_children: price_children, uhrd_room_price: uhrd_room_price }); } },固定一页多个月份模式的 wxml
<block wx:for='{{bigArr}}' wx:for-index="i" wx:key="index"> <view class='date_container'> <view class='date-show'> {{item.year}}年{{item.month}}月 </view> <view class='week_header'> <view wx:for='{{week}}' wx:key="item">{{item}}<view></view></view> </view> <view class='clear'></view> <view class='date-bigbox'> <view class='date-box'> <block wx:for='{{item.dateArr}}' wx:for-item="date" wx:for-index="ii" wx:key="date.todayTime" > <view bindtap="edit" data-date="{{date.todayTime}}" data-i="{{i}}" data-ii="{{ii}}" data-icon="{{date.icon}}"> <view class='date-head'> <view>{{date.dayNum}}</view> </view> <view class='date-weight'> <icon class="iconfont font13pt {{date.icon?'icon-qizhi':''}}"></icon> <block wx:if="{{date.dayNum>0}}"> </block> </view> </view> </block> </view> </view> </view> </block>css
.date_container{ margin-bottom: 20px; } .date-show{ width:100%; height: 40px; font-size: 18px; line-height: 40px; text-align: center; margin:auto; } .lt-arrow,.rt-arrow{ position: absolute; top: 7px; width: 13px; height: 13px; } .lt-arrow{ left: -100rpx; } .rt-arrow{ right: -100rpx; } .week_header{ width: 100%; background-color: #f8f8f8; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; overflow: hidden; } .week_header>view{ float: left; width: 14.28571428571429%; font-size: 11pt; text-align: center; line-height: 150%; padding: 5px 0; } .date-box{ font-size: 0; height: auto; width: auto; border-left: 1px solid #D9D9D9; } .date-bigbox{ height: auto; overflow: hidden; } .date-box>view{ position: relative; display: inline-block; width: 14.28571428571429%; height: 50px; color: #020202; text-align: center; vertical-align: middle; box-sizing: border-box; border-right: 1rpx solid #D9D9D9; border-bottom: 1rpx solid #D9D9D9; } /*日数*/ .date-head{ height: 25px; line-height: 25px; font-size: 12pt; } /**/ .date-weight{ height: 25px; color: red; } .date-weight icon{ position: relative; bottom: 7px; } /*选中*/ .active_date { background: #17944f; color: #ffffff !important; } .show_box{ font-size: 24rpx; line-height: 50rpx; } .submit{ background-color: #1296DB; color: #fff; }js
let monthShowNum= 2;//展示多少个月 //get获取动态参数 util.requestUrl({ url: "moving.php", data: {}, method: "get", success: function (res) { console.log(res.data) //usgu_guide_moving=res.data.msg //直接赋值 that.dateInit(res.data.msg,monthShowNum); //放success()里赋值完再渲染日期避免空值 } }) /*计算日期and赋值*/ dateInit(msg, monthShowNum) { let usgu_guide_moving=msg; //返回的上团日期json let monthadd = monthShowNum-1; //需要增加渲染的月份数 let bigArr = []; //月份综合数组 let now =new Date(); let year = now.getFullYear();//年份 for (let m = 0; m <= monthadd;m++) { let dateArr = []; //号数综合数组 let month = now.getMonth() + 1+m; //月份 if (month > 12) { let shang = parseInt(month / 12); //商 let yushu = month % 12; //余数 if(yushu==0) //余数为0即12月，循环到12月时其实还是当年，所以不用增加年份，手动设商-1 { month=12; shang = shang-1; } else month=yushu; year = now.getFullYear() + shang; } let startWeek = new Date(year + '/' + month + '/' + 1).getDay(); //当月月1号对应的星期 格式yyyy/mm/1 let dayNums = new Date(year, month, 0).getDate(); //获取当月月有多少天 let obj = {}; let usgu_len = usgu_guide_moving.length; let arrLen = startWeek + dayNums;//dateArr的数组长度 for (let i = 0; i < arrLen; i++) { if (i >= startWeek) { let icon = false;//旗帜，默认不显示 let day = util.add0(i - startWeek + 1);//日期，号数，个位补0 let todayTime = new Date(year + '/' + util.add0(month) + '/' + day).getTime() / 1000; /*转成时间戳*/ for (let ii = 0; ii < usgu_len; ii++) { if (usgu_guide_moving[ii] == todayTime) icon=true;//循环动态，对应就插旗 } /**整合数组 */ obj = { dayNum: day, todayTime: todayTime, icon: icon, } } else { /**小于当月1号的为空格 */ obj = {}; } dateArr[i] = obj; } bigArr[m] = { year: year, month: month, dateArr: dateArr, } } this.setData({ bigArr:bigArr }) },