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


在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的值就可以实现不同的选择了。
微信小程序滑动选择器的更多相关文章
- 微信小程序のwxss选择器
		
一.什么是选择器 选择器就是选择标签所用样式的模式,即:以什么方式设置样式. 二.微信小程序的样式选择器 .calss就是选择器的一种 三.选择器的优先级 element表示样式元素:.element ...
 - 微信小程序省市区选择器对接数据库
		
前言,小程序本身是带有地区选着器的(网站:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html),由于自己开发的程序的数据是很 ...
 - 微信小程序------联动选择器
		
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. 先来看看效果图: 1:普通选择器 m ...
 - 微信小程序-滑动视图注意事项
		
真的得吐槽下微信的开发文档,一点点都不详细的好吗. <!--垂直滚动,这里必须设置高度--> <scroll-view scroll-y="true" style ...
 - 微信小程序 地区选择器 和省市县三级联动 和button按钮分享
		
wxml代码: <view class="section__title"> 地区选择器 </view> <picker bindchange=&quo ...
 - 微信小程序 - 滑动显示地点信息(map)
		
演示效果如下: 资源如下 marker,png index.wxml <view class="map-container"> <map id="map ...
 - 微信小程序日期选择器
		
/* JS代码部分 */ const date = new Date() const years = [] const months = [] const days = [] const hours ...
 - 自定义省市选择器 微信小程序多列选择器
		
由于微信小程序的选择器为省市区选择器共3列 如我仅需要省市2列的选择器 就需要我们另寻他法找来找去没有合适的 只能自己写了 1. 首先我们把所需要的省数据 市县数据放在一个 p_c.js 文件里面,使 ...
 - 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)
		
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
 
随机推荐
- JDK源码分析 – ArrayList
			
ArrayList类的申明 ArrayList是一个支持泛型的,底层通过数组实现的一个可以存任意类型的数据结构,源码中的定义如下: public class ArrayList<E> ex ...
 - div、span绑定内容改变事件
			
内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...
 - UIKit中的几个核心对象的介绍:UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍
			
UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍 一:UIApplication:单例(关于单例后面的文章中会详细介绍,你现在只要知道 ...
 - 【bzoj4720】[NOIP2016]换教室  期望dp
			
题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程.在可以选择的课程中,有2n节课程安排在n个时间段上.在第i(1≤i≤n)个时间段上,两节内容相同的课程同时在不同的 ...
 - (三)Redis列表List操作
			
List全部命令如下: lset key index value # 将列表key下标为index的元素的值设置为value,当 index 参数超出范围,或对一个空列表(key不存在)进行lset时 ...
 - VS2017常用快快捷键
			
VS2017常用快快捷键 VS中代码对齐等快捷键 在VS中,选定代码后,按Ctrl+K+F组合键,可以自动进行代码对齐. 注意:要先按下Ctrl和K,再按下F,因为Ctrl ...
 - [CF613D]Kingdom and its Cities
			
description 题面 data range \[n, q,\sum k\le 10^5\] solution 还是虚树的练手题 \(f[0/1][u]\)表示\(u\)的子树内,\(u\)是否 ...
 - 【Codeforces Round #404 (Div. 2)】题解
			
A. Anton and Polyhedrons 直接统计+答案就可以了. #include<cstdio> #include<cstring> #include<alg ...
 - BZOJ3992:[SDOI2015]序列统计——题解
			
https://www.lydsy.com/JudgeOnline/problem.php?id=3992 https://www.luogu.org/problemnew/show/P3321 小C ...
 - BZOJ3110:[ZJOI2013]K大数查询——题解
			
+++++++++++++++++++++++++++++++++++++++++++ +本文作者:luyouqi233. + +欢迎访问我的博客:http://www.cnblogs.com/luy ...