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


在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 ...
随机推荐
- LintCode-165.合并两个排序链表
合并两个排序链表 将两个排序链表合并为一个新的排序链表 样例 给出 1->3->8->11->15->null,2->null, 返回 1->2->3- ...
- C# Winform防止闪频和再次运行
其实想实现只允许运行一个实例很简单,就是从program的入口函数入手.有两种情况: 第一种,用户运行第二个的时候给一个提示: using System; using System.Collectio ...
- 利用Vue v-model实现一个自定义的表单组件
原文请点此链接 http://blog.csdn.net/yangbingbinga/article/details/61915038
- 关于c++中public & private方法调用问题
class IDNoIdentifier { public: IDNoIdentifier(); ~IDNoIdentifier(); typedef vector<cv::Rect> C ...
- Java字符串2
if(str!= null && str.isEmpty()){ dao.get(str); } str.isEmpty判断字符串是否为空字符串
- [C/C++] 友元函数和友元类
A---友元函数: class Data{ public: ... friend int f(int &m);//友元函数 ... } 友元函数是可以直接访问类的私有成员的非成员函数.它是定义 ...
- el语句 的 变量只能从域对象中获取 所以需要先添加到域对象
el语句 的 变量只能从域对象中获取 所以需要先添加到域对象
- Python 源码剖析(六)【内存管理机制】
六.内存管理机制 1.内存管理架构 2.小块空间的内存池 3.循环引用的垃圾收集 4.python中的垃圾收集 1.内存管理架构 Python内存管理机制有两套实现,由编译符号PYMALLOC_DEB ...
- COGS 705——回家
描述 USACO 2.4.4 现在是晚餐时间,而母牛们在外面分散的牧场中. 农民约翰按响了电铃,所以她们开始向谷仓走去. 你的工作是要指出哪只母牛会最先到达谷仓(在给出的测试数据中,总会有且只有一只最 ...
- 1406: [AHOI2007]密码箱
1406: [AHOI2007]密码箱 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1591 Solved: 944[Submit][Status][ ...