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

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

微信小程序滑动选择器的更多相关文章

  1. 微信小程序のwxss选择器

    一.什么是选择器 选择器就是选择标签所用样式的模式,即:以什么方式设置样式. 二.微信小程序的样式选择器 .calss就是选择器的一种 三.选择器的优先级 element表示样式元素:.element ...

  2. 微信小程序省市区选择器对接数据库

    前言,小程序本身是带有地区选着器的(网站:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html),由于自己开发的程序的数据是很 ...

  3. 微信小程序------联动选择器

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. 先来看看效果图: 1:普通选择器 m ...

  4. 微信小程序-滑动视图注意事项

    真的得吐槽下微信的开发文档,一点点都不详细的好吗. <!--垂直滚动,这里必须设置高度--> <scroll-view scroll-y="true" style ...

  5. 微信小程序 地区选择器 和省市县三级联动 和button按钮分享

    wxml代码: <view class="section__title"> 地区选择器 </view> <picker bindchange=&quo ...

  6. 微信小程序 - 滑动显示地点信息(map)

    演示效果如下: 资源如下 marker,png index.wxml <view class="map-container"> <map id="map ...

  7. 微信小程序日期选择器

    /* JS代码部分 */ const date = new Date() const years = [] const months = [] const days = [] const hours ...

  8. 自定义省市选择器 微信小程序多列选择器

    由于微信小程序的选择器为省市区选择器共3列 如我仅需要省市2列的选择器 就需要我们另寻他法找来找去没有合适的 只能自己写了 1. 首先我们把所需要的省数据 市县数据放在一个 p_c.js 文件里面,使 ...

  9. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

随机推荐

  1. new关键字 、this关键字、base关键字

    使用new,所做的三件事: 1. (类是引用对象,引用对象是在堆中开辟空间)在堆中开辟空间 2. 在开辟的堆空间中创建对象 3. 调用对象的构建函数 4. 隐藏父类成员:子类的成员可以与隐藏从父类继承 ...

  2. MySQL常用存储引擎功能与用法详解

    本文实例讲述了MySQL常用存储引擎功能与用法. MySQL存储引擎主要有两大类: 1. 事务安全表:InnoDB.BDB. 2. 非事务安全表:MyISAM.MEMORY.MERGE.EXAMPLE ...

  3. asp.net MVC4 @Html.DropDownList的使用

    在MVC4中使用Razor语法,一使用就爱上他了, 一般项目都是有一些增删改查功能,表单下拉框是经常使用的,除了用原始的<select>外,还可以用@Html.DropDownList和@ ...

  4. Activiti5工作流笔记一

    介绍工作流 网上工作流的定义一大堆,这里就不去复制了,通俗的理解,工作流就是类似OA系统中请假审批.报销审批等一系列流程,下级提交的申请只有直系领导才能审批,其他人是没有权限的,而只有直系领导审批通过 ...

  5. BZOJ 2460 元素(贪心+线性基)

    显然线性基可以满足题目中给出的条件.关键是如何使得魔力最大. 贪心策略是按魔力排序,将编号依次加入线性基,一个数如果和之前的一些数异或和为0就跳过他. 因为如果要把这个数放进去,那就要把之前的某个数拿 ...

  6. 【bzoj4195】[Noi2015]程序自动分析 离散化+并查集

    题目描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3,…代表程序中出现的变量,给定n个形如xi=xj或xi≠xj的变量 ...

  7. BZOJ3997 TJOI2015组合数学(动态规划)

    copy: Dilworth定理:DAG的最小链覆盖=最大点独立集 最小链覆盖指选出最少的链(可以重复)使得每个点都在至少一条链中 最大点独立集指最大的集合使集合中任意两点不可达 此题中独立的定义即是 ...

  8. Luogu1155 NOIP2008双栈排序(并查集)

    两个位置i和j上的元素不能被放进同一个栈的充要条件显然是存在k使i<j<k且ak<ai<aj.由此在保证合法的情况下贪心地放就是正确的了. 至于如何判断,可以记一下后缀最小值, ...

  9. zlog使用手册

    zlog使用手册 来源 http://hardysimpson.github.io/zlog/UsersGuide-CN.html Contents Chapter 1  zlog是什么? 1.1   ...

  10. java 注解使用笔记

    一.语法 注解也属于一种类型 public @interface MyTestAnnotation { } 用@interface描述 根据情况可以应用于包.类型.构造方法.方法.成员变量.参数及本地 ...