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


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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
JQuery 解析多维的Json数据格式
Nov 02 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
简单聊聊TypeScript只读修饰符
Apr 06 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 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
微信小程序python用户认证的实现
2019/07/29 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
读书演讲主持词
2014/03/18 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
车辆工程专业求职信
2014/06/14 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server