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

  在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. 理解windows模型

    同步 所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回.按照这个定义,其实绝大多数函数都是同步调用(例如sin, isdigit等).但是一般而言,我们在说同步.异步的时候,特指 ...

  2. printf以及各种变种

    int printf(char *format, [argument]); 其向终端(显示器.控制台等)输出字符 int fprintf(FILE*stream, const char*format, ...

  3. [剑指Offer] 60.把二叉树打印成多行

    题目描述 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. [思路]使用队列实现二叉树的层次遍历. /* struct TreeNode { int val; struct TreeN ...

  4. Java InputStream转File

    文件处于磁盘上或者流处于内存中 在输入流有已知的和预处理的数据时,如在硬盘上的文件或者在流处于内存中.这种情况下,不需要做边界校验,并且内存容量条件允许的话,可以简单的读取并一次写入. InputSt ...

  5. 第25天:js-封装函数-淘宝鼠标展示

    封装函数: 1.函数形参相当于变量,不能加引号. 2.实参要和形参一一对应. 案例:鼠标移到小图上,背景展示相应放大的图片.代码如下: <!DOCTYPE html> <html l ...

  6. Xshell访问本地或者远程Linux虚拟机

    背景 在本地PC机上安装了VMware workstation和Ubuntu系统,但是每次访问虚拟机都需要输入登陆密码,比较不方便.为此,通过Xshell来访问虚拟机,提高工作效率. 步骤 1.打开虚 ...

  7. CF986B Petr and Permutations

    题意翻译 Petr要打乱排列.他首先有一个从 111 到 nnn 的顺序排列,然后进行 3n3n3n 次操作,每次选两个数并交换它们. Alex也要打乱排列.他与Petr唯一的不同是他进行 7n+17 ...

  8. P3074 [USACO13FEB]牛奶调度Milk Scheduling

    题目描述 Farmer John's N cows (1 <= N <= 10,000) are conveniently numbered 1..N. Each cow i takes ...

  9. Linux相关——关于gdb的checkpoint & breakpoints指令

    1,checkpoint ,,,这个指令简直,,,相见恨晚啊,居然现在才发现,.. 好吧来介绍一下这个指令:checkpoint(检查点) 我们调试程序,常常会出现好不容易发现了错误,却已经跑完那个地 ...

  10. BZOJ3076 & 洛谷3081:[USACO2013 MAR]Hill Walk 山走——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=3076 https://www.luogu.org/problemnew/show/P3081#sub ...