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


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 相关文章推荐
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
a标签调用js的方法总结
Sep 05 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
js实现经典贪吃蛇小游戏
Mar 19 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 mysql 判断update之后是否更新了的方法
2012/01/10 PHP
php实现的ping端口函数实例
2014/11/12 PHP
Symfony生成二维码的方法
2016/02/04 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
jQuery 表格工具集
2010/04/25 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
js canvas实现星空连线背景特效
2019/11/01 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python sys模块sys.path使用方法示例
2013/12/04 Python
python获取目录下所有文件的方法
2015/06/01 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
如何使用Python 打印各种三角形
2019/06/28 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
python 项目目录结构设置
2020/02/14 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
毕业生幼师求职自荐信
2013/10/01 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
国贸专业求职信
2014/06/28 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android