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

 更新时间:2018年08月10日 14:48:05   作者:luozx207  
这篇文章主要介绍了微信小程序滑动选择器的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

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

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

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

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

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:http://www.cnblogs.com/luozx207/p/9453245.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 微信小程序实现事件传参与数据同步流程详解

    微信小程序实现事件传参与数据同步流程详解

    这篇文章主要介绍了微信小程序开发中实现事件传参与数据同步的详细流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-10-10
  • 使用JavaScript渲染页面的方法详解

    使用JavaScript渲染页面的方法详解

    本文主要介绍了使用JavaScript渲染页面的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴下面随着小编来一起来学习吧
    2023-12-12
  • JS实现骰子3D旋转效果

    JS实现骰子3D旋转效果

    这篇文章主要为大家详细介绍了JS实现骰子3D旋转效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JS实现从连接中获取youtube的key实例

    JS实现从连接中获取youtube的key实例

    这篇文章主要介绍了JS实现从连接中获取youtube的key的方法,涉及javascript字符串操作的相关技巧,需要的朋友可以参考下
    2015-07-07
  • 详解JavaScript引擎V8执行流程

    详解JavaScript引擎V8执行流程

    本文主要讲解的是V8的技术,是V8的入门篇,主要目的是了解V8的内部机制,希望对前端,快应用,浏览器,以及nodejs同学有些帮助。这里不涉及到如何编写优秀的前端,只是对JS内部引擎技术的讲解
    2021-06-06
  • js锁屏解屏通过对$.ajax进行封装实现

    js锁屏解屏通过对$.ajax进行封装实现

    js锁屏解屏是通过对$.ajax进行封装实现的,需要的朋友可以参考下
    2014-07-07
  • Bootstrap~多级导航(级联导航)的实现效果【附代码】

    Bootstrap~多级导航(级联导航)的实现效果【附代码】

    下面小编就为大家分享一篇Bootstrap~多级导航(级联导航)的实现效果【附代码】。小编觉得挺不错。希望对大家有所帮助。一起跟随小编过来看看吧
    2016-03-03
  • 使用JavaScript平移和缩放图像的示例代码

    使用JavaScript平移和缩放图像的示例代码

    平移和缩放是查看图像时常用的功能,我们可以放大图像以查看更多细节,进行图像编辑,Dynamsoft Document Viewer是一个用于此目的的SDK,它为文档图像提供了一组查看器,在本文中,我们将演示如何使用它来平移和缩放图像,需要的朋友可以参考下
    2024-08-08
  • 关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)

    关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios

    本文给大家介绍BootStrap modal 在IOS9中不能弹出的问题以及bootstrap datepicker 在bootstrap modal中不显示问题的解决方案,非常不错,需要的朋友参考下
    2016-12-12
  • input输入密码变黑点密文的实现方法

    input输入密码变黑点密文的实现方法

    本文主要介绍了Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论