脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序滑动选择器

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

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

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

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

在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动画之磁性吸附效果篇

    在实际应用中，常常需要为拖拽的元素限定范围。而通过限定范围，再增加一些辅助的措施，就可以实现磁性吸附的效果。本文将详细介绍javascript的磁性吸附，有需要的朋友可以参考借鉴。
    2016-12-12
  • 几个比较实用的JavaScript 测试及效验工具

    几个比较实用的JavaScript 测试及效验工具

    JavaScript 是一款强大的广泛运用于现代Web站点及应用的脚本语言。作为一个技艺精湛的 Web 开发者，掌握JavaScript可以增强用户的使用体验，提供交互及富客户端等功能。
    2010-04-04
  • JavaScript 变量作用域及闭包

    JavaScript 变量作用域及闭包

    作用域JavaScript 的变量作用域是按照函数划分的，为了快速的了解它的特性，我们通过实例来进行演示。
    2009-08-08
  • Js中的FileReader相关操作方法总结

    Js中的FileReader相关操作方法总结

    FileReader是前端进行文件处理的一个重要的API,特别是在对图片的处理上,这篇文章主要给大家介绍了关于Js中FileReader相关操作方法的相关资料,需要的朋友可以参考下
    2024-07-07
  • JS实现远程控制的基本原理和实现方法

    JS实现远程控制的基本原理和实现方法

    远程控制是指通过网络等远距离通讯手段控制另一设备的操作行为，在现实生活中，随着物联网技术的不断发展，远程控制技术越来越重要，本文将详细介绍 JS 实现远程控制的基本原理、开发流程和实现方法,需要的朋友可以参考下
    2023-06-06
  • Javascript 表格操作实现代码

    Javascript 表格操作实现代码

    Javascript操作表格 包括获取值，创建表格
    2009-06-06
  • Javascript实现单例模式

    Javascript实现单例模式

    单例模式也称作为单子模式，更多的也叫做单体模式。为软件设计中较为简单但是最为常用的一种设计模式。这篇文章主要介绍了Javascript实现单例模式的相关资料,需要的朋友可以参考下
    2016-01-01
  • 详解JS中的柯里化(currying)

    详解JS中的柯里化(currying)

    这篇文章主要介绍了JS中的柯里化(currying),需要的朋友可以参考下
    2017-08-08
  • 小程序实现轮播图

    小程序实现轮播图

    这篇文章主要为大家详细介绍了小程序实现轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • Javascript实现登录记住用户名和密码功能

    Javascript实现登录记住用户名和密码功能

    本文主要介绍了Javascript实现登录记住用户名和密码功能的代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论