微信小程序滑动选择器的实现代码


Posted in Javascript onAugust 10, 2018

本文介绍了微信小程序滑动选择器的实现代码,分享给大家,具体如下:

实现微信小程序滑动选择效果

微信小程序滑动选择器的实现代码

微信小程序滑动选择器的实现代码

在wxml文件中,用一个picker标签代表选择器,bindchange是用户点击确定后触发的函数,index是picker自带的参数,用户点击确定后,bindchange绑定的函数用.detail.value就可以访问到。第一个选择的index值为0,依次递增。range要在page的data中先定义一个数组给它赋值,然后数组的值就会变为选择器中的选项

<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
   <view class='choseQuestion' >
    {{choseQuestionBank}}
   </view>
  </picker>

js文件中对应的数据和函数如下

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的值就可以实现不同的选择了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
vue-router 学习快速入门
Mar 01 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
基于Proxy的小程序状态管理实现
Jun 14 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
详解vue 组件
Jun 11 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 #Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 #Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 #Javascript
Vue全局分页组件的实现代码
Aug 10 #Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 #Javascript
JavaScript闭包原理与用法实例分析
Aug 10 #Javascript
vue 动态绑定背景图片的方法
Aug 10 #Javascript
You might like
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python中的getopt函数使用详解
2015/07/28 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
Python基础教程之异常详解
2019/01/10 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Django的models模型的具体使用
2019/07/15 Python
Python for循环与getitem的关系详解
2020/01/02 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
给男朋友的道歉信
2014/01/12 职场文书
金融管理应届生求职信
2014/02/20 职场文书
银行委托书范本
2014/04/04 职场文书
公务员培的训心得体会
2014/09/01 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
2014年教研工作总结
2014/12/06 职场文书
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis