本文实例为大家分享了微信小程序实现多列选择器的具体代码,供大家参考,具体内容如下
<picker class="picks" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="picker {{seleNull == 0 ?'':'cur'}}"> {{seleNull == 0 ? date:'请选择日期'}} </view> <image class="icon" src="../../images/down.png"></image> </picker>
data: { seleNull: null, multiIndex: [0, 0, 0], multiArray: [], month: '', year: '' }, onLoad: function (options) { var that = this that.return_date() }, // 获取历史记录日期 return_date() { var that = this var datas = { type: that.data.tag, user_id: app.globalData.userId, month: that.data.month, year: that.data.year } wx.request({ url: app.globalData.urlSrc + 'hardware/return_date', data: datas, method: "POST", header: { 'content-type': app.globalData.head }, success(res) { console.log('获取历史日期', res.data) var code = res.data.status if (code == 200) { var multiArray = res.data.data that.setData({ multiArray: multiArray }) } } }) }, // 多例选择 bindMultiPickerChange: function (e) { var multiIndex = e.detail.value var multiArray = this.data.multiArray this.setData({ multiIndex: multiIndex, seleNull: 0, date: multiArray[0][multiIndex[0]] + '-' + multiArray[1][multiIndex[1]] + '-' + multiArray[2][multiIndex[2]] }) this.getmeasInfos() }, // 控制单列 bindMultiPickerColumnChange: function (e) { var that = this var data = { multiArray: that.data.multiArray, multiIndex: that.data.multiIndex, idx:e.detail.value, column : e.detail.column } // data.multiIndex[e.detail.column] = e.detail.value; if(data.column == 0){ that.setData({ year: data.multiArray[0][data.idx], month:'' }) data.multiIndex[1] = 0; data.multiIndex[2] = 0; that.return_date() }else if(data.column == 1){ that.setData({ month: data.multiArray[1][data.idx] }) data.multiIndex[2] = 0; that.return_date() } },
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理