微信小程序滑动选择器的实现代码
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文介绍了微信小程序滑动选择器的实现代码,分享给大家,具体如下:
实现微信小程序滑动选择效果
在wxml文件中,用一个picker标签代表选择器,bindchange是用户点击确定后触发的函数,index是picker自带的参数,用户点击确定后,bindchange绑定的函数用.detail.value就可以访问到。第一个选择的index值为0,依次递增。range要在page的data中先定义一个数组给它赋值,然后数组的值就会变为选择器中的选项
1 2 3 4 5 | < picker bindchange = "bindPickerChange" value = "{{index}}" range = "{{array}}" > < view class = 'choseQuestion' > {{choseQuestionBank}} </ view > </ picker > |
js文件中对应的数据和函数如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | Page({ data:{ array:[ '全部' , '计算机网络' , '算法' , '数据结构' , 'linux' ], type:0, choseQuestionBank: "点击选择" }, bindPickerChange: function (e) { var that= this console.log( 'picker发送选择改变,携带值为' , e.detail.value) this .setData({ type: e.detail.value, choseQuestionBank: that.data.array[e.detail.value] }) }, }) |
点击确认选择的时候,只要判断一下this.data.type的值就可以实现不同的选择了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
Bootstrap~多级导航(级联导航)的实现效果【附代码】
下面小编就为大家分享一篇Bootstrap~多级导航(级联导航)的实现效果【附代码】。小编觉得挺不错。希望对大家有所帮助。一起跟随小编过来看看吧2016-03-03关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios
本文给大家介绍BootStrap modal 在IOS9中不能弹出的问题以及bootstrap datepicker 在bootstrap modal中不显示问题的解决方案,非常不错,需要的朋友参考下2016-12-12
最新评论