微信小程序月日选择及滚动选择器
本人是一个萌新,如有不对的地方请多多指教 。
先看效果。
上图为联动 效果,有一个问题就是 不能控制滚动面板。
上代码?
.wxml
<!--pages/switps/switps.wxml-->
<view>
<view class="select_date">
<picker mode="multiSelector" bindchange="bindMultiPickerChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="select">
<image class="select_icon" src="../image/date.png"></image>
<view class="picker">{{date}}</view>
<image class="select_icon" src="../image/last1.png"></image>
</view>
</picker>
</view>
<view>
<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%;">
<view id="demo1" class="scroll-view-item_H demo-text-1" wx:for="{{items}}" wx:for-index='key' wx:key="id">
<view>{{item.date}}</view>
<view class="{{key==isshow?'blues':''}}">
<view class="blues_data">{{item.day}}</view>
<view class="dop" style="display:{{key>2&&key<=isshow?'':'none'}}"></view>
</view>
</view>
</scroll-view>
</view>
</view>
.js
Page({
data: {
isshow:'3',
select_class:'blues',
date: '3月1日',
multiArray: [[],[]],
items:[]
},
bindMultiPickerChange: function(e) {
var date = this.data.multiArray[0][e.detail.value[0]]+this.data.multiArray[1][e.detail.value[1]]
this.setData({date: date})
},
DateArray(){
var a = [[],[]]
for(var i=1;i<=12;i++){a[0].push(i.toString()+'月');}
for(var j=1;j<30;j++){a[1].push(j.toString()+'日'); }
this.setData({multiArray:a})
},
switpdate(month){
var dates = []
for(var i=0;i<this.mGetDate(2020, month);i++){
dates.push({
'date':this.getWeek('2020-'+month+'-'+(i+1).toString()),
'day':i+1})}
dates.unshift(66,77,11);
dates.push(44,55,56);
this.setData({items:dates})
},
mGetDate(year, month){
var d = new Date(year, month, 0);
return d.getDate();
},
getWeek(dateString) {
var myDate = new Date();
var dateArray = dateString.split("-");
var date = new Date(myDate.getFullYear(), parseInt(dateArray[1] - 1), dateArray[2]);
return "星期" + "日一二三四五六".charAt(date.getDay());
},
scroll(e){
var ss = this.data.date.replace(/月/g,'-')
ss = ss.replace(/日/g,'-')
var aa = ss.split('-')
this.setData({
isshow:parseInt(e.detail.scrollLeft/50+3).toString(),
date: aa[0]+'月'+(parseInt(this.data.isshow)-2).toString()+'日',
})
},
onLoad: function (options) {
this.DateArray();
this.mGetDate(2020, 11)
this.switpdate(11)
var myDate = new Date();
var date = (myDate.getMonth()+1).toString()+'月'+(myDate.getDate()).toString()+'日'
this.setData({date: date})
}
})