picker从底部弹起选择器组件

组件细节:

1) 该组件有五种类型,分别是普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器。

2) 组件内必需包裹内容,不然无法弹出选项

  1. <!-- 采用wxs提供数据源更直观显示 -->
  2. <wxs module="picker">
  3. module.exports.items=['美国', '德国', '英国', '法国'];
  4. </wxs>
  5.  
  6. <!-- 点击灰色的选择器无法弹出,因为其内部没有包裹内容 -->
  7. <picker mode="selector" value="0" style="background:#ccc;width:300px;height:100px;" range="{{picker.items}}">
  8. </picker>
  9.  
  10. <!-- 点击红色选择器内文字可以弹出 -->
  11. <picker mode="selector" value="0" style="background:#f00;width:300px;height:100px;" range="{{picker.items}}"> <view>点我这一行可以弹出</view> </picker>

3) 五类选择器默认返回值不同(值也可以通过JS脚本进行更改):

普通选择器:[Number] 当前选项的序号值,第一项序号为0,以次累推

多列选择器:[Array] 元素值是每一列的选择项的序号值

时间选择器:[String] 格式 hh:mm

日期选择器:[String] 格式 YYYY-MM-DD

省市区选择器: [Array] 格式 [ 省名称, 市名称, 区名称 ]

五种类型:

1、 普通选择器: mode="selector"

原型:

  1. <picker
  2. mode="selector"
  3. value="[String]"
  4. range="[Array | Object Array]"
  5. range-key="[String]"
  6. disabled="[Boolean]"
  7. bindchange="[EventHandle]"
  8. bindcancel="[EventHandle]"
  9. >
  10. </picker>

属性:

名称 是否必需 类型 默认值 说明
mode [String] selector 固定值为selector表示是普通的选择器
range [Array | Object Array] []

初始化选择器选项的数据源

值类型为Array时,数组的每一个元素为选择器的选项列表

值类型为Object Array时,要求指明range-key,做为选项列表值

range [String]  

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

value [String] 空值

选择器默认值。

其值默认为选项的序号值(第一项序号为0,以次类推)

如果想自定义其值,可以通过JS设置此属性值

disabled [Boolean] false 值为true表示禁用此组件
bindchange [EventHandle]  

选择组件选项时触发此事件,不管选择的项是否发生变化都会触发此事件,(即点击组件右侧“确认”按钮时就会触发此事件)

通过JS改变组件值时不触发此事件。

事件参数中返回组件值:event.detail = {value: value}

bindcancel [EventHandle]  

点击组件右侧“取消”按钮时就会触发此事件

2、多列选择器:mode="multiSelector"

原型:

  1. <picker
  2. mode="multiSelector"
  3. value="[Array]"
  4. range="[二维Array / 二维Object Array]"
  5. range-key="[String]"
  6. disabled="[boolean]"
  7. bindchange="[EventHandle]"
  8. bindcancel="[EventHandle]"
  9. bindcolumnchange="[EventHandle]"
  10. >
  11. </picker>

属性:

名称 是否必需 类型 默认值 说明
mode [String] multiSelector 固定值为multiSelector表示是多列选择器
range [Array | Object Array] []

初始化选择器选项的数据源

mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[["a","b"], ["c","d"]]

range [String]  

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

value [Array] []

选择器默认值。

如果想自定义其值,可以通过JS设置此属性值

value 每一项的值表示选择了 range 对应项中的第几个(下标从 0 开始)

disabled [Boolean] false 值为true表示禁用此组件
bindchange [EventHandle]  

选择组件选项时触发此事件,不管选择的项是否发生变化都会触发此事件,(即点击组件右侧“确认”按钮时就会触发此事件)

通过JS改变组件值时不触发此事件。

事件参数中返回组件值:event.detail = {value: value}

bindcolumnchange [EventHandle]  

某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标

bindcancel [EventHandle]  

点击组件右侧“取消”按钮时就会触发此事件

3、时间选择器:mode="time"

原型:

  1. <picker
  2. mode="time"
  3. value="[String]"
  4. start="[Date]"
  5. end="[Date]"
  6. disabled="[Boolean]"
  7. bindchange="[EventHandle]"
  8. bindcancel="[EventHandle]"
  9. >
  10. </picker>

属性:

名称 是否必需 类型 默认值 说明
mode [String] time 固定值为time表示是普通的选择器
start [String]  

有效时间范围的开始,字符串格式为"hh:mm"

end [String]  

有效时间范围的结束,字符串格式为"hh:mm"

value [String]  

表示选中的时间,格式为"hh:mm"

disabled [Boolean] false 值为true表示禁用此组件
bindchange [EventHandle]  

选择组件选项时触发此事件,不管选择的项是否发生变化都会触发此事件,(即点击组件右侧“确认”按钮时就会触发此事件)

通过JS改变组件值时不触发此事件。

事件参数中返回组件值:event.detail = {value: value}

bindcancel [EventHandle]  

点击组件右侧“取消”按钮时就会触发此事件

4、日期选择器:mode="date"

原型:

  1. <picker
  2. mode="date"
  3. start="[String]"
  4. end="[String]"
  5. fields="[day | month | year]"
  6. value="[String]"
  7. disabled="[Boolean]"
  8. bindchange="[EventHandle]"
  9. bindcancel="[EventHandle]"
  10. >
  11. </picker>

属性:

名称 是否必需 类型 默认值 说明
mode [String] date 固定值为date表示是普通的选择器
start [String]  

有效日期起始范围,格式为"YYYY-MM-DD"

end [String]  

有效日期结束范围,格式为"YYYY-MM-DD"

fields [day | month | year] day

有效值 year,month,day,表示选择器的粒度

值为day时,格式为: YYYY-MM-DD

值为month时,格式为: YYYY-MM

值为year时,格式为: YYYY

value [String] 0

表示选中的日期,格式为"YYYY-MM-DD"

disabled [Boolean] false 值为true表示禁用此组件
bindchange [EventHandle]  

选择组件选项时触发此事件,不管选择的项是否发生变化都会触发此事件,(即点击组件右侧“确认”按钮时就会触发此事件)

通过JS改变组件值时不触发此事件。

事件参数中返回组件值:event.detail = {value: value}

bindcancel [EventHandle]  

点击组件右侧“取消”按钮时就会触发此事件

5. 省市区选择器:mode="region" 

原型:

  1. <picker
  2. mode="region"
  3. value="[Array]"
  4. custom-item="[String]"
  5. disabled="[Boolean]"
  6. bindchange="[EventHandle]"
  7. bindcancel="[EventHandle]"
  8. >
  9. </picker>

属性:

名称 是否必需 类型 默认值 说明
mode [String] regio 固定值为regio表示是普通的选择器
value [Array] []

表示选中省市区,格式:[省, 市, 区]

custom-item [String]   可为每一列的顶部添加一个自定义的项(比如全部,或者请选择)
disabled [Boolean] false 值为true表示禁用此组件
bindchange [EventHandle]  

选择组件选项时触发此事件,不管选择的项是否发生变化都会触发此事件,(即点击组件右侧“确认”按钮时就会触发此事件)

通过JS改变组件值时不触发此事件。

事件参数中返回组件值:event.detail = {value: value}

bindcancel [EventHandle]  

点击组件右侧“取消”按钮时就会触发此事件

注意:

1) 该选择器显示三列类型选项,分别是省、市、区。

2)该选择器的显示是[省份名称, 市名称, 区名称]。

3)省、市、区数据源由组件自动生成,无需提供。

【picker】选择器组件说明的更多相关文章

  1. 微信小程序开发之picker选择器组件用法

    picker组件时一个从底部弹起的可滚动的选择器(嵌入页面滚动器组件picker-view查看https://mp.weixin.qq.com/debug/wxadoc/dev/component/p ...

  2. 微信小程序 — 自定义picker选择器弹窗内容+textarea穿透bug

    微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都只有定死的样式和内容. 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: 代码如下: < ...

  3. JavaScript:日期选择器组件的使用

    前言: 在实际项目开发中,日期选择是一个十分常见而且重要的问题,在表单中设计到日期的验证时,如果让用户自己输入时间的话,那么使用正则进行验证其正确性是不可取的,因为他一般只能验证日期的格式,无法准确的 ...

  4. 小程序循环多个picker选择器,实现动态增、减

    现象 循环picker选择器,改变一个下拉框选项,导致全部下拉框选项改变: 问题 怎样操作才能实现只改变当前操作的下拉框的值? 思路 在js中设置一个数组变量,存储每个picker选择器默认的值:然后 ...

  5. vue 时间选择器组件

    vue 时间选择器组件 组件效果: 单文件组件: <template> <div class="date-pickers"> <!--date为com ...

  6. 记录 vant Picker 选择器,实现三级联动,传对应省市区code值

    最近使用vant UI写移动端,感觉还不错 功能挺全的,带的还有省市区三级联动. 但是 突然遇到一个 产品要传的 省市区的code码,还和vant的 邮编不一样,我*****. 看了一下vant UI ...

  7. Flutter中的日期、格式化日期、日期选择器组件

    Flutter中的日期和时间戳 //獲取當前日期 DateTime _nowDate = DateTime.now(); print(_nowDate);//2019-10-29 10:57:20.3 ...

  8. 设计和编写一个异步通用Picker选择器,用于时间日期、城市、商品分类的选择

    目录 一.功能规划 二.最底层基础实现 (1)Picker界面和功能实现 (2)不同类型的选择器基础实现 三.数据源层 (1)时间日期 (2)多级同步分类,如:城市 (3)多级异步分类,如:城市 四. ...

  9. 记:使用IScroll.js 开发picker日历组件遇到的问题及经验总结

    IScroll中文文档 第一个问题: 边界留白 就是这种,上边界(最小),下边界(最大)有两个列表的位置是不能选择的.解决的办法是: 在HTML中,添加空白节点就行了. 第二个问题:初始化之后的滚动停 ...

随机推荐

  1. firefox下载文件弹出框之终极解决方案-vbs模拟键盘操作

    由于近期一直被firefox的保存文件弹出框困扰,摸索尝试过几种方法,已有的方法可以跑通但是对对效果不太满意,因此一直在寻找合适的解决办法. 最近发现了也可以通过VBS来处理弹出框,速度也不错,其原理 ...

  2. CSU-ACM2018暑期训练7-贪心

    A:合并果子(贪心+优先队列) B:HDU 1789 Doing Homework again(非常经典的贪心) C:11572 - Unique Snowflakes(贪心,两指针滑动保存子段最大长 ...

  3. IOS开发数据存储篇—IOS中的几种数据存储方式

    IOS开发数据存储篇—IOS中的几种数据存储方式 发表于2016/4/5 21:02:09  421人阅读 分类: 数据存储 在项目开发当中,我们经常会对一些数据进行本地缓存处理.离线缓存的数据一般都 ...

  4. 一点一点看JDK源码(六)java.util.LinkedList前篇之链表概要

    一点一点看JDK源码(六)java.util.LinkedList前篇之链表概要 liuyuhang原创,未经允许禁止转载 本文举例使用的是JDK8的API 目录:一点一点看JDK源码(〇) 1.什么 ...

  5. trunc(sysdate)的含义是什么

    1.ORACLE中TRUNC是截取的函数

  6. Linux系统中的vi/vim指令【详解】

    vi是Unix世界里极为普遍的全屏幕文本编辑器,vim是它的改进版本Vi IMproved的简称.几乎可以说任何一台Unix机器都会提供这套软件. 只要简单的在Shell下执行vi就可以进入 vi 的 ...

  7. C语言之一般树

    1.一般树 将这种一般的树转化成我们熟悉的单链表形式,这有三层,每一层都可以看成单链表或者多个分散的单链表 数据节点如下: struct tree {        int elem;        ...

  8. vue.js使用axios

    使用axios的两种调用方式 1.安装axios $ cnpm install axios 2.在vue入口文件main.js中引入(推荐全局引入),或是在当前页面中引入(局部) import axi ...

  9. 重庆Uber优步司机奖励政策

    获得任何奖励的前提条件:当周接单率80%以上,当周乘客评分4.5分以上,且无刷单等欺诈行为. 滴滴快车单单2.5倍,注册地址:http://www.udache.com/如何注册Uber司机(全国版最 ...

  10. C#学习第一阶段——语法基础

    C#是一门面向对象的编程语言.在面向对象的程序设计方法中,程序由各种相互交互的对象组成.相同种类的对象具有相同的属性,或者说是在相同的class 中的.       例如,以矩形为例,它具有高(len ...