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


在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 ...
随机推荐
- matlab的二维卷积操作(转)
MATLAB的conv2函数实现步骤(conv2(A,B)): 其中,矩阵A和B的尺寸分别为ma*na即mb*nb ① 对矩阵A补零,第一行之前和最后一行之后都补mb-1行,第一列之前和最后一列之后都 ...
- php中的<?= ?>替换<?php echo ?>
首先修改PHP.ini文件.如下: 1. 将short_open_tag = Off 改成On 开启以后可以使用PHP的短标签:<? ?> <?= $test ?>来代替 &l ...
- Windows 8.1 SecureBoot未正确配置的解决方法
使用联想Y510P,安装win8.1后破解 ,屏幕右下角老是显示 SecureBoot未正确配置的解决方法,以下是解决方案 步骤1:在机器重启至“Lenovo字样的屏幕”时,不停敲击“F2”键或“Fn ...
- Access Denied for user root @localhost 解决方案
问题描述: C:\Users\bo.wang> mysql -u root -p Enter password: ERROR 1045 (28000): Access denied for us ...
- 获取当前路径下的所有文件路径 :listFiles
获取当前路径下的所有文件路口 :listFiles
- CentOS vi编辑器简单备忘
1.常用编辑命令 dd 删除(剪切)光标所在整行 5dd 删除(剪切)从光标处开始的 5 行 yy 复制光标所在整行 5yy 复制从光标处开始的 5 行 n 显示搜索命令定位到的下一个字符串 N 显示 ...
- BZOJ3675 & 洛谷3648 & UOJ104:[Apio2014]序列分割——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=3675 https://www.luogu.org/problemnew/show/P3648 ht ...
- 洛谷P3759 [TJOI2017]不勤劳的图书管理员 【树状数组套主席树】
题目链接 洛谷P3759 题解 树状数组套主席树板题 #include<algorithm> #include<iostream> #include<cstring> ...
- 牛客网 提高组第8周 T2 推箱子 解题报告
推箱子 链接: https://ac.nowcoder.com/acm/contest/176/B 来源:牛客网 题目描述 在平面上有\(n\)个箱子,每个箱子都可以看成一个矩形,两条边都和坐标轴平行 ...
- switch语法的盲点
switch语法在项目使用的频率很低,今天看到一个相关的例子引发一些思考,,同时自己也写了一些简单的例子如下: 实例1: int dayOfWeek = 5; switch (dayOfWeek){ ...