picker

从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。

wxml:

普通选择器(mode = selector)

<view class='cell-picker'>
<view class='cell-name'>chengshi</view>
<view class='cell-val'>
<picker mode = "selector"  bindchange="bindPickerChangeType" range-key="{{'Name'}}" value="{{indexType}}" range="{{array}}">{{array[indexType].Name}}</picker>
</view>
</view>

mode = selector:普通选择器

bindchange:value 改变时触发 change 事件

range-key: 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

value: value 的值表示选择了 range 中的第几个(下标从 0 开始)

range: mode为 selector 或 multiSelector 时,range 有效。

data:{ 

array: [
{
"Name": "shanghai",
"Id": "020"
}, {
"Name": "beijing ",
"Id": "005"
}, {
"Name": "tianjin",
"Id": "030"
}
],
indexType: 0, //选择了 range 中的第几个(下标从 0 开始)

}

//点击
bindPickerChangeType: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
indexType: e.detail.value
})
},

微信小程序---picker的更多相关文章

  1. 微信小程序picker组件两列关联使用方式

    在使用微信小程序picker组件时候,可以设置属性   mode = multiSelector   意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...

  2. 微信小程序picker组件关于objectArray数据类型绑定

    一.前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想 ...

  3. 微信小程序——picker通过value返回你想获取的值

    关于微信小程序中的picker使用方法可以访问:picker-小程序 从它的官方文档中,可以看出它返回的value值是它range的下标: 在项目中,我们大多数时候传的值并不是需要这个下标,而是其他的 ...

  4. 微信小程序picker重写,精确到时分秒

    https://developers.weixin.qq.com/miniprogram/dev/component/picker.html 微信小程序提供的picker组件,只精确到分,项目中需要秒 ...

  5. mpvue + 微信小程序 picker 实现自定义多级联动 超简洁

    微信小程序官网只提供了省市区的三级联动,实际开发中更多的是自定义的多级联动: 依照微信小程序官网提供的自定义多级联动,需要使用到picker 的多列选择器,即设置 mode = multiSelect ...

  6. 微信小程序—picker(滚动选择器)

    官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 ...

  7. 微信小程序picker的坑

    js文件: Companyarr: [{ id: '公司id1', companyname: "公司1的名字" }, { id: '公司id2', companyname: &qu ...

  8. 微信小程序picker下拉绑定数据

    页面部分 <picker mode = "selector" bindchange="bindPickerChange" value="{{pr ...

  9. 微信小程序 picker 中range-key的坑

    <picker class='fr' bindchange="onChangeBuild" range-key="{{'num'}}" value=&qu ...

  10. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

随机推荐

  1. 并发编程:GIL,线程池,进程池,阻塞,非阻塞,同步,异步

    一  GIL(global interpreter lock) GIL中文叫全局解释器锁,我们执行一个文件会产生一个进程,那么我们知道进程不是真正的执行单位,而是资源单位,所以进程中放有解释器(cpy ...

  2. Linux服务器安装Nginx

    Nginx 安装 一.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel 二.首先 ...

  3. Python的列表和元组

    一.什么是列表 1.列表是一个可变的数据类型,它由[]表示,其中的每一项元素使用“,”逗号隔开,可以储存各种数据类型.列表相比于字符串,可以存放大量数据类型,其是有序的,有索引,可以使用切片,方便取值 ...

  4. JavaScript正则表达式以及字符串处理

    正则表达式之基本概念 在我们写页面时,往往需要对表单的数据比如账号.身份证号等进行验证,而最有效的.用的最多的便是使用正则表达式来验证.那什么是正则表达式呢? 正则表达式(Regular Expres ...

  5. UiAutomatorHelper 调试类

    package rom; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; impo ...

  6. 20165205 预习作业三 Linux安装及学习

    Linux安装及学习 安装Ubuntu 1)安装版本 在安装VirtualBox时选择了VirtualBox 5.2.6 platform package 安装Ubuntu时选择了Ubuntu 16. ...

  7. Eclipse svn 项目 星号

    上图: 明明没有文件修改过就是无脑显示有提交的文件,有强迫症受不了. 而且每次提交你都点开看有没有漏掉啥文件.很麻烦.也很难受 .很容易漏提交 把本地文件跟SVN同步对比一下. 果然有文件. 添加规则 ...

  8. 9.纯 CSS 创作一种按钮被瞄准的交互特效

    原文地址:https://segmentfault.com/a/1190000014680999 吃鸡倍镜,哈哈哈 HTML代码: <div class="box"> ...

  9. python中的count

    count(self, sub, start=None, end = None)用于计算字符串中子序列的个数,sub, start=None, end = None定义查找范围,不写默认查找全部 举个 ...

  10. 同时安装python2和python3环境

    一.同时安装两个环境 https://www.cnblogs.com/zhengyihan1216/p/6011640.html 二.快速安装django: https://blog.csdn.net ...