微信小程序怎样实现多列选择器,代码是什么
Admin 2022-08-12 群英技术资讯 674 次浏览
本文实例为大家分享了微信小程序实现多列选择器的具体代码,供大家参考,具体内容如下
<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进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
在前端开发时,点击父菜单弹出子菜单功能是比较经常遇到需求,这篇文章就主要介绍用JavaScript实现点击出现子菜单,以下是简易的实现效果以及具体代码展示,感兴趣的朋友就继续往下看吧。
原生Ajax与JQuery Ajax,有不少朋友对此感兴趣,下面小编给大家整理和分享了相关知识和资料,易于大家学习和理解,有需要的朋友可以借鉴参考,下面我们一起来了解一下吧。
微信小程序实现拍照打卡功能 本文实例为大家分享了微信小程序实现拍照打卡的具体代码,供大家参考,具体内容如下 由于拍照组件是相当于一个块,用隐藏显示的方法不太好,为了更好的用户交互,选择了在一个新的页面调用相机组件,上传图片并保存打卡数据的方式. 小程序端 签到页面wxml <view class="signBtn" bindtap="signSubmit"> <view>{{signTime}}</view> <view>打卡签 ...
这篇文章主要为大家详细介绍了原生JavaScript实现购物车效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要介绍了ElementUI下拉框选择后不显示值问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008