【picker】选择器组件说明
picker从底部弹起选择器组件
组件细节:
1) 该组件有五种类型,分别是普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器。
2) 组件内必需包裹内容,不然无法弹出选项
- <!-- 采用wxs提供数据源更直观显示 -->
- <wxs module="picker">
- module.exports.items=['美国', '德国', '英国', '法国'];
- </wxs>
- <!-- 点击灰色的选择器无法弹出,因为其内部没有包裹内容 -->
- <picker mode="selector" value="0" style="background:#ccc;width:300px;height:100px;" range="{{picker.items}}">
- </picker>
- <!-- 点击红色选择器内文字可以弹出 -->
- <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"
原型:
- <picker
- mode="selector"
- value="[String]"
- range="[Array | Object Array]"
- range-key="[String]"
- disabled="[Boolean]"
- bindchange="[EventHandle]"
- bindcancel="[EventHandle]"
- >
- </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"
原型:
- <picker
- mode="multiSelector"
- value="[Array]"
- range="[二维Array / 二维Object Array]"
- range-key="[String]"
- disabled="[boolean]"
- bindchange="[EventHandle]"
- bindcancel="[EventHandle]"
- bindcolumnchange="[EventHandle]"
- >
- </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"
原型:
- <picker
- mode="time"
- value="[String]"
- start="[Date]"
- end="[Date]"
- disabled="[Boolean]"
- bindchange="[EventHandle]"
- bindcancel="[EventHandle]"
- >
- </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"
原型:
- <picker
- mode="date"
- start="[String]"
- end="[String]"
- fields="[day | month | year]"
- value="[String]"
- disabled="[Boolean]"
- bindchange="[EventHandle]"
- bindcancel="[EventHandle]"
- >
- </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"
原型:
- <picker
- mode="region"
- value="[Array]"
- custom-item="[String]"
- disabled="[Boolean]"
- bindchange="[EventHandle]"
- bindcancel="[EventHandle]"
- >
- </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】选择器组件说明的更多相关文章
- 微信小程序开发之picker选择器组件用法
picker组件时一个从底部弹起的可滚动的选择器(嵌入页面滚动器组件picker-view查看https://mp.weixin.qq.com/debug/wxadoc/dev/component/p ...
- 微信小程序 — 自定义picker选择器弹窗内容+textarea穿透bug
微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都只有定死的样式和内容. 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: 代码如下: < ...
- JavaScript:日期选择器组件的使用
前言: 在实际项目开发中,日期选择是一个十分常见而且重要的问题,在表单中设计到日期的验证时,如果让用户自己输入时间的话,那么使用正则进行验证其正确性是不可取的,因为他一般只能验证日期的格式,无法准确的 ...
- 小程序循环多个picker选择器,实现动态增、减
现象 循环picker选择器,改变一个下拉框选项,导致全部下拉框选项改变: 问题 怎样操作才能实现只改变当前操作的下拉框的值? 思路 在js中设置一个数组变量,存储每个picker选择器默认的值:然后 ...
- vue 时间选择器组件
vue 时间选择器组件 组件效果: 单文件组件: <template> <div class="date-pickers"> <!--date为com ...
- 记录 vant Picker 选择器,实现三级联动,传对应省市区code值
最近使用vant UI写移动端,感觉还不错 功能挺全的,带的还有省市区三级联动. 但是 突然遇到一个 产品要传的 省市区的code码,还和vant的 邮编不一样,我*****. 看了一下vant UI ...
- Flutter中的日期、格式化日期、日期选择器组件
Flutter中的日期和时间戳 //獲取當前日期 DateTime _nowDate = DateTime.now(); print(_nowDate);//2019-10-29 10:57:20.3 ...
- 设计和编写一个异步通用Picker选择器,用于时间日期、城市、商品分类的选择
目录 一.功能规划 二.最底层基础实现 (1)Picker界面和功能实现 (2)不同类型的选择器基础实现 三.数据源层 (1)时间日期 (2)多级同步分类,如:城市 (3)多级异步分类,如:城市 四. ...
- 记:使用IScroll.js 开发picker日历组件遇到的问题及经验总结
IScroll中文文档 第一个问题: 边界留白 就是这种,上边界(最小),下边界(最大)有两个列表的位置是不能选择的.解决的办法是: 在HTML中,添加空白节点就行了. 第二个问题:初始化之后的滚动停 ...
随机推荐
- firefox下载文件弹出框之终极解决方案-vbs模拟键盘操作
由于近期一直被firefox的保存文件弹出框困扰,摸索尝试过几种方法,已有的方法可以跑通但是对对效果不太满意,因此一直在寻找合适的解决办法. 最近发现了也可以通过VBS来处理弹出框,速度也不错,其原理 ...
- CSU-ACM2018暑期训练7-贪心
A:合并果子(贪心+优先队列) B:HDU 1789 Doing Homework again(非常经典的贪心) C:11572 - Unique Snowflakes(贪心,两指针滑动保存子段最大长 ...
- IOS开发数据存储篇—IOS中的几种数据存储方式
IOS开发数据存储篇—IOS中的几种数据存储方式 发表于2016/4/5 21:02:09 421人阅读 分类: 数据存储 在项目开发当中,我们经常会对一些数据进行本地缓存处理.离线缓存的数据一般都 ...
- 一点一点看JDK源码(六)java.util.LinkedList前篇之链表概要
一点一点看JDK源码(六)java.util.LinkedList前篇之链表概要 liuyuhang原创,未经允许禁止转载 本文举例使用的是JDK8的API 目录:一点一点看JDK源码(〇) 1.什么 ...
- trunc(sysdate)的含义是什么
1.ORACLE中TRUNC是截取的函数
- Linux系统中的vi/vim指令【详解】
vi是Unix世界里极为普遍的全屏幕文本编辑器,vim是它的改进版本Vi IMproved的简称.几乎可以说任何一台Unix机器都会提供这套软件. 只要简单的在Shell下执行vi就可以进入 vi 的 ...
- C语言之一般树
1.一般树 将这种一般的树转化成我们熟悉的单链表形式,这有三层,每一层都可以看成单链表或者多个分散的单链表 数据节点如下: struct tree { int elem; ...
- vue.js使用axios
使用axios的两种调用方式 1.安装axios $ cnpm install axios 2.在vue入口文件main.js中引入(推荐全局引入),或是在当前页面中引入(局部) import axi ...
- 重庆Uber优步司机奖励政策
获得任何奖励的前提条件:当周接单率80%以上,当周乘客评分4.5分以上,且无刷单等欺诈行为. 滴滴快车单单2.5倍,注册地址:http://www.udache.com/如何注册Uber司机(全国版最 ...
- C#学习第一阶段——语法基础
C#是一门面向对象的编程语言.在面向对象的程序设计方法中,程序由各种相互交互的对象组成.相同种类的对象具有相同的属性,或者说是在相同的class 中的. 例如,以矩形为例,它具有高(len ...