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


在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 ...
随机推荐
- iOS- 网络访问JSON数据类型与XML数据类型的实现思路及它们之间的区别
1.JSON (基本上移动开发的主要数据传输都是JSON) 1.1.JSON特点: a.[] 表示数组 b.{} 表示字典 - 对象模型建立关系 c.应用非常多,基本上移动开发的主要数据传输都是JSO ...
- iOS开发跳转指定页面
for (UIViewController *VC in self.navigationController.viewControllers) { if ([VC isKindOfClass:[Car ...
- 《Effective C#》快速笔记(二)- .NET 资源托管
简介 续 <Effective C#>读书笔记(一)- C# 语言习惯. .NET 中,GC 会帮助我们管理内存,我们并不需要去担心内存泄漏,资源分配和指针初始化等问题.不过,它也并非万能 ...
- 关于已部署的WCF服务升级的问题
在日常的开发过程中,我们会经常迭代发布不同的版本,所以WCF服务的接口也会经常处于变动的状态,比如在传递实体类中新加一个字段.修改参数名称等等关于服务升级的问题.但是我们不可能让已发布的版本重新引用新 ...
- [计算机网络] C++模拟telnet登陆SMTP服务发送邮件过程
在百度文库中的<使用telnet协议收发邮件>,我们可以很清楚地看到如何通过telnet来进行发送邮件,下面是一些需要用到的命令,通过以下命令可以很容易实现邮件发送功能.为了更好地理解其中 ...
- [OS] 进程互斥
对互斥的正确软件实现算法(面包店算法)是非常耗时的,现代的计算机系统都会提供简单的硬件指令,使用这些指令能够有效地解决临界区问题. 硬件提供一个TestAndSet指令,来实现原子指令的功能: boo ...
- 移动端body跟着模态框一起滑动问题
遇到了一个问题,是点击链接出现弹框,弹框里面的内容是可以滑动的,结果我滑动的时候发现下面的body也跟着一起滑动,先看一下代码. 弹框的 HTML: <div class="mask& ...
- 第三方框架-纯代码布局:Masonry的简单使用
Masonry是一个对系统NSLayoutConstraint进行封装的第三方自动布局框架,采用链式编程的方式提供给开发者API.系统AutoLayout支持的操作,Masonry都支持,相比系统AP ...
- 【bzoj4921】[Lydsy六月月赛]互质序列 暴力
题目描述 给出一个序列,要求删除一段非空区间,使得剩下的数的个数大于等于2.求所有删除方式剩下的数的最大公约数的和. 输入 第一行包含一个正整数n(3<=n<=100000),表示序列的长 ...
- android应用打前需要准备些啥?
发布之前我们需要准备的东西 参考了google官方和结合国内开发经验 1) 用户协议(本地.网络.API) 2) 签名文件(用于为APP加密,唯一标签) 3) 程序图标(第一个面对用户,准备不同的但合 ...