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

  在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. RXSwift --UITableView之初探

    对于RXSwift中的一些基本概念和说明请参看其他文章,接下来我们使用RXSwift一步一步去构建TableView,从简单到复杂.iOS开发过程中tableView的使用率是最高的,他的一些代理方法 ...

  2. c运行时库,c标准库,Windows系统api的关系

    原文地址:http://blog.csdn.net/seastars_sh/article/details/8233324 C运行库和C标准库的关系 C标准库,顾名思义既然是标准,就是由标准组织制定的 ...

  3. Activiti5工作流笔记二

    流程变量 import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; import org.activiti ...

  4. java 文本读取 写入指定长度的内容

  5. Xcode开发技巧之code snippets(代码片段)

    一.什么是代码片段 当在Xcode中输入dowhile并回车后,Xcode会出现下图所示的提示代码: 这就是代码片段,目的是使程序员以最快的速度输入常用的代码片段,提高编程效率.该功能是从Xcode4 ...

  6. 2017 ICPC beijing F - Secret Poems

    #1632 : Secret Poems 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 The Yongzheng Emperor (13 December 1678 – ...

  7. 【刷题】BZOJ 1002 [FJOI2007]轮状病毒

    Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个N轮状基由圆环上N个不同的基原子 和圆心处一个核原子构成的,2个原子之间的边表示这2个原子之间的信息通道.如下 ...

  8. BZOJ1086:[SCOI2005]王室联邦——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1086 题面源于洛谷. 题目描述 “余”人国的国王想重新编制他的国家.他想把他的国家划分成若干个省,每 ...

  9. CF498D:Traffic Jams in the Land——题解

    https://vjudge.net/problem/CodeForces-498D http://codeforces.com/problemset/problem/498/D 题面描述: 一些国家 ...

  10. BZOJ1006 神奇的国度 【弦图染色——最大势算法MCS】

    1006: [HNOI2008]神奇的国度 Time Limit: 20 Sec  Memory Limit: 162 MB Submit: 4146  Solved: 1916 [Submit][S ...