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


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 对象的属性和方法4种不同的类型
Mar 19 Javascript
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
vue多次循环操作示例
Feb 08 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 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程序--记数器
2006/10/09 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
web前端vue filter 过滤器
2018/01/12 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python机器人运动范围问题的解答
2019/04/29 Python
python:动态路由的Flask程序代码
2019/11/22 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
传媒专业推荐信范文
2013/11/23 职场文书
大学生毕业鉴定
2014/01/31 职场文书
剪彩仪式主持词
2014/03/19 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
python 使用pandas读取csv文件的方法
2022/12/24 Python