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


在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 ...
随机推荐
- new关键字 、this关键字、base关键字
使用new,所做的三件事: 1. (类是引用对象,引用对象是在堆中开辟空间)在堆中开辟空间 2. 在开辟的堆空间中创建对象 3. 调用对象的构建函数 4. 隐藏父类成员:子类的成员可以与隐藏从父类继承 ...
- MySQL常用存储引擎功能与用法详解
本文实例讲述了MySQL常用存储引擎功能与用法. MySQL存储引擎主要有两大类: 1. 事务安全表:InnoDB.BDB. 2. 非事务安全表:MyISAM.MEMORY.MERGE.EXAMPLE ...
- asp.net MVC4 @Html.DropDownList的使用
在MVC4中使用Razor语法,一使用就爱上他了, 一般项目都是有一些增删改查功能,表单下拉框是经常使用的,除了用原始的<select>外,还可以用@Html.DropDownList和@ ...
- Activiti5工作流笔记一
介绍工作流 网上工作流的定义一大堆,这里就不去复制了,通俗的理解,工作流就是类似OA系统中请假审批.报销审批等一系列流程,下级提交的申请只有直系领导才能审批,其他人是没有权限的,而只有直系领导审批通过 ...
- BZOJ 2460 元素(贪心+线性基)
显然线性基可以满足题目中给出的条件.关键是如何使得魔力最大. 贪心策略是按魔力排序,将编号依次加入线性基,一个数如果和之前的一些数异或和为0就跳过他. 因为如果要把这个数放进去,那就要把之前的某个数拿 ...
- 【bzoj4195】[Noi2015]程序自动分析 离散化+并查集
题目描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3,…代表程序中出现的变量,给定n个形如xi=xj或xi≠xj的变量 ...
- BZOJ3997 TJOI2015组合数学(动态规划)
copy: Dilworth定理:DAG的最小链覆盖=最大点独立集 最小链覆盖指选出最少的链(可以重复)使得每个点都在至少一条链中 最大点独立集指最大的集合使集合中任意两点不可达 此题中独立的定义即是 ...
- Luogu1155 NOIP2008双栈排序(并查集)
两个位置i和j上的元素不能被放进同一个栈的充要条件显然是存在k使i<j<k且ak<ai<aj.由此在保证合法的情况下贪心地放就是正确的了. 至于如何判断,可以记一下后缀最小值, ...
- zlog使用手册
zlog使用手册 来源 http://hardysimpson.github.io/zlog/UsersGuide-CN.html Contents Chapter 1 zlog是什么? 1.1 ...
- java 注解使用笔记
一.语法 注解也属于一种类型 public @interface MyTestAnnotation { } 用@interface描述 根据情况可以应用于包.类型.构造方法.方法.成员变量.参数及本地 ...