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

  在wxml文件中,用一个picker标签代表选择器,bindchange是用户点击确定后触发的函数,index是picker自带的参数,用户点击确定后,bindchange绑定的函数用.detail.value就可以访问到。第一个选择的index值为0,依次递增。range要在page的data中先定义一个数组给它赋值,然后数组的值就会变为选择器中的选项

  1. <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  2. <view class='choseQuestion' >
  3. {{choseQuestionBank}}
  4. </view>
  5. </picker>

  js文件中对应的数据和函数如下

  1. Page({
  2. data:{
  3. array:['全部','计算机网络','算法','数据结构','linux'],
  4. type:0,
  5. choseQuestionBank:"点击选择"
  6. },
  7. bindPickerChange: function (e) {
  8. var that=this
  9. console.log('picker发送选择改变,携带值为', e.detail.value)
  10. this.setData({
  11. type: e.detail.value,
  12. choseQuestionBank: that.data.array[e.detail.value]
  13. })
  14. },
  15. })

  点击确认选择的时候,只要判断一下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. 【week2】 词频统计效能分析

    效能统计工具:Jprofiler License Key:L-Larry_Lau@163.com#23874-hrwpdp1sh1wrn#0620 该性能分析工具对服务器进行监听,图一是线程变化图,当 ...

  2. hadoop fs 部分命令详解

    1,Hadoop fs –fs [local | <file system URI>]:声明hadoop使用的文件系统,如果不声明的话,使用当前配置文件配置的,按如下顺序查找:hadoop ...

  3. Firefox火狐浏览器 修改默认搜索引擎

    如图:

  4. [剑指Offer] 61.序列化二叉树

    题目描述 请实现两个函数,分别用来序列化和反序列化二叉树 /* struct TreeNode { int val; struct TreeNode *left; struct TreeNode *r ...

  5. dpr dproj 扩展名区别,dprdproj

    这段时间用xe6,看了下目录下生成的一些文件,因为隐藏了扩展名,看到两个名字一样的文件,右键属性看了下,同名但扩展名不同,百度了下区别,没有找到答案,问群里的朋友才知道区别,特此记录下来: dpr:D ...

  6. P1365 WJMZBMR打osu! / Easy

    题目背景 原 维护队列 参见P1903 题目描述 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:( 我们来简化一下这个游戏的规则 有 nnn 次点击要做,成功了就是o,失败了 ...

  7. 【题解】NOIP2015推销员

    ……普及组的题目都做不出来……(:´д`)ゞ……再这样下去要退役了啊…… 不过不管怎样感觉这题还是蛮好的,也要记录一下下~ 我们注意到数据的范围,n 是 1e5, 又有 1e5组询问,暴力大概是 \( ...

  8. BZOJ5288 & 洛谷4436 & LOJ2508:[HNOI/AHOI2018]游戏——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=5288 https://www.luogu.org/problemnew/show/P4436 ht ...

  9. HDOJ.2955 Robberies (01背包+概率问题)

    Robberies 算法学习-–动态规划初探 题意分析 有一个小偷去抢劫银行,给出来银行的个数n,和一个概率p为能够逃跑的临界概率,接下来有n行分别是这个银行所有拥有的钱数mi和抢劫后被抓的概率pi, ...

  10. The driver has not received any packets from the server

    解决方法: jdbc的url添加参数: jdbc.url=jdbc:mysql://localhost:3306/totosea?useUnicode=true&characterEncodi ...