picker
从底部弹起的滚动选择器。
| 属性 |
类型 |
默认值 |
必填 |
说明 |
最低版本 |
| header-text |
String |
|
否 |
选择器标题 |
|
| mode |
String |
selector |
否 |
选择器类型 |
|
| disabled |
Boolean |
false |
否 |
是否禁用 |
|
| bindcancel |
EventHandle |
|
否 |
取消选择时触发 |
|
mode 的合法值
普通选择器：mode = selector
| 属性 |
类型 |
默认值 |
说明 |
最低版本 |
| range |
Array/[Object] |
[] |
mode 为 selector 或 multiSelector 时，range 有效 |
|
| range-key |
String |
|
当 range 是一个 [Object] 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |
|
| value |
Number |
0 |
表示选择了 range 中的第几个（下标从 0 开始） |
|
| bindchange |
EventHandle |
|
value 改变时触发 change 事件，event.detail = {value} |
|
多列选择器：mode = multiSelector
| 属性 |
类型 |
默认值 |
说明 |
最低版本 |
| range |
Array/[Object] |
[] |
mode 为 selector 或 multiSelector 时，range 有效 |
|
| range-key |
String |
|
当 range 是一个 [Object] 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 |
|
| value |
Number |
0 |
表示选择了 range 中的第几个（下标从 0 开始） |
|
| bindchange |
EventHandle |
|
value 改变时触发 change 事件，event.detail = {value} |
|
| bindcolumnchange |
EventHandle |
|
列改变时触发 |
|
时间选择器：mode = time
| 属性 |
类型 |
默认值 |
说明 |
最低版本 |
| value |
String |
|
表示选中的日期，格式为"hh:mm" |
|
| start |
String |
|
表示有效日期范围的开始，字符串格式为"hh:mm" |
|
| end |
String |
|
表示有效日期范围的结束，字符串格式为"hh:mm" |
|
| fields |
String |
day |
有效值 year,month,day，表示选择器的粒度 |
|
| bindchange |
EventHandle |
|
value 改变时触发 change 事件，event.detail = {value} |
|
时间选择器：mode = time
| 属性 |
类型 |
默认值 |
说明 |
最低版本 |
| value |
String |
|
表示选中的日期，格式为"YYYY-MM-DD" |
|
| start |
String |
|
表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" |
|
| end |
String |
|
表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" |
|
| fields |
String |
day |
有效值 year,month,day，表示选择器的粒度 |
|
| bindchange |
EventHandle |
|
value 改变时触发 change 事件，event.detail = {value} |
|
fields 有效值：
| 值 |
说明 |
最低版本 |
| year |
选择器粒度为年 |
|
| month |
选择器粒度为月份 |
|
| day |
选择器粒度为天 |
|
日期选择器：mode = region
| 属性 |
类型 |
默认值 |
说明 |
最低版本 |
| value |
Array |
[] |
表示选中的省市区，默认选中每一列的第一个值 |
|
| custom-item |
String |
|
可为每一列的顶部添加一个自定义的项 |
|
| level |
String |
region |
选择器层级 |
|
| bindchange |
EventHandle |
|
value 改变时触发 change 事件，event.detail = {value, code, postcode}，其中字段 code 是统计用区划代码，postcode 是邮政编码 |
|
level 的有效值：
| 值 |
说明 |
最低版本 |
| province |
省级选择器 |
|
| city |
市级选择器 |
|
| region |
区级选择器 |
|
示例代码：
<view class="container">
<view class="statement">从底部弹起的滚动选择器。</view>
<view class="cssname">mode:selector</view>
<picker id="picker-color" value="{{colorsValue}}" header-text="选择颜色" bindchange="colorchange" bindcancel="bindcancel" range="{{colors}}">选择颜色: {{colors[colorsValue]}}</picker>
<view class="cssname">mode:multiSelector</view>
<picker id="picker-goods" mode="multiSelector" header-text="选择商品" value="{{goodsValue}}" range-key="name" bindcancel="bindcancel" bindcolumnchange="goodcolumnchange" bindchange="goodchange" range="{{goods}}">选择商品: {{catagories[goodsValue[0]].name}}>{{catagories1[catagories[goodsValue[0]].index][goodsValue[1]].name}}>{{catagories1[catagories[goodsValue[0]].index][goodsValue[1]].child[goodsValue[2]].name}}</picker>
<view class="cssname">mode:time</view>
<picker id="picker-time" mode="time" header-text="选择时间" value="{{timeValue}}" bindchange="timechange" bindcancel="bindcancel">选择时间: {{timeValue}}</picker>
<picker mode="time" header-text="选择时间" value="{{timeValue}}" bindchange="timechange" bindcancel="bindcancel" start="01:30" end="20:20">限制选择时间: 01:30-20:20</picker>
<picker mode="time" header-text="选择时间" value="{{timeValue}}" bindchange="timechange" bindcancel="bindcancel" start="18:25" end="22:05">限制选择时间: 18:25-22:05</picker>
<view class="cssname">mode:date</view>
<picker mode="date" value="{{yearValue}}" bindchange="yearchange" bindcancel="bindcancel" fields="year">选择年份: {{yearValue}}</picker>
<picker mode="date" value="{{yearValue}}" bindchange="yearchange" bindcancel="bindcancel" start="2010-01-01" end="2030-03-28" fields="year">限制选择年份: 2010至2030</picker>
<picker mode="date" value="{{monthValue}}" bindchange="monthchange" bindcancel="bindcancel" fields="month">选择月份: {{monthValue}}</picker>
<picker mode="date" value="{{monthValue}}" bindchange="monthchange" bindcancel="bindcancel" start="2019-01-01" end="2019-03-28" fields="month">限制选择月份: 2019-01至2019-03</picker>
<picker mode="date" value="{{monthValue}}" bindchange="monthchange" bindcancel="bindcancel" start="2018-11-01" end="2019-03-28" fields="month">限制选择月份: 2018-11至2019-03</picker>
<picker mode="date" value="{{dateValue}}" bindchange="datechange" bindcancel="bindcancel" fields="day">选择日期: {{dateValue}}</picker>
<picker mode="date" value="{{dateValue}}" bindchange="datechange" bindcancel="bindcancel" start="2019-01-01" end="2019-06-31" fields="day">限制选择日期: 2019-01-01至2019-06-30</picker>
<picker mode="date" value="{{dateValue}}" bindchange="datechange" bindcancel="bindcancel" start="2021-12-29" end="2022-01-07" fields="day">限制选择日期: 2021-12-29至2022-01-07</picker>
<view class="cssname">mode:region</view>
<picker mode="region" value="{{regionValue}}" bindchange="regionchange" bindcancel="bindcancel" level="region" custom-item="全部" >选择省市区: {{regionValue}}-{{regionCodeValue}}-{{regionCode}}</picker>
<picker mode="region" level="city" value="{{cityValue}}" bindchange="citychange" custom-item="all" >选择省市: {{cityValue}}-{{cityCodeValue}}-{{cityCode}}</picker>
<picker mode="region" level="province" value="{{provinceValue}}" bindchange="provincechange" bindcancel="bindcancel" >选择省: {{provinceValue}}-{{provinceCodeValue}}-{{provinceCode}}</picker>
<view class="cssname">bindcancel：取消选择时触发, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{bindcancel}}</text>
<view class="cssname">bindchange：value 改变时触发, 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{bindchange}}</text>
<view class="cssname">bindcolumnchange：列改变时触发(mode=multiSelector), 参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{bindcolumnchange}}</text>
</view>
Page({
data: {
colors: ['红', '黄', '蓝', '绿', '青', '蓝', '紫'],
colorsValue: 3,
goodsValue: [2, 0, 3],
timeValue: '10:10',
yearValue: '2019',
monthValue: '2019-01',
dateValue: '2019-01-25',
regionValue: ['江苏省', '南京市', '浦口区'],
regionCodeValue: [],
regionCode: '',
cityValue: ['江苏省', '南京市'],
cityCodeValue: [],
cityCode: '',
provinceValue: ['江苏省'],
provinceCodeValue: [],
provinceCode: '',
goods: [],
catagories: [
{ name: '图书', index: 0 },
{ name: '电脑办公', index: 1 },
{ name: '家用电器', index: 2 },
{ name: '数码', index: 3 },
{ name: '厨具', index: 4 }
],
catagories1: [
[
{
name: '科技', child: [
{ name: '工业技术' },
{ name: '科普读物' },
{ name: '电子通信' },
{ name: '计算机' },
{ name: '医学' }
]
},
{
name: '文艺', child: [
{ name: '小说' },
{ name: '文学' },
{ name: '传记' },
{ name: '艺术' }
]
},
{
name: '少儿', child: [
{ name: '0-2岁' },
{ name: '3-6岁' },
{ name: '7-10岁' },
{ name: '11-14岁' }
]
},
{
name: '教育', child: [
{ name: '中小学' },
{ name: '大中专' },
{ name: '教育考试' }
]
},
{
name: '其他', child: [
{ name: '工具书' },
{ name: '杂志' }
]
}
],
[
{
name: '电脑整件', child: [
{ name: '笔记本' },
{ name: '超级本' },
{ name: '游戏本' },
{ name: '平板电脑' },
{ name: '台式机' },
{ name: '一体机' }
]
},
{
name: '外设产品', child: [
{ name: '笔记本' },
{ name: '超级本' },
{ name: '游戏本' },
{ name: '平板电脑' },
{ name: '台式机' },
{ name: '一体机' }
]
},
{
name: '办公设备', child: [
{ name: '投影机' },
{ name: '打印机' },
{ name: '传真设备' },
{ name: '碎纸机' },
{ name: '办公家具' },
{ name: '装订机' },
{ name: '安防监控' }
]
},
{
name: '文具/耗材', child: [
{ name: '硒鼓/墨盒' },
{ name: '纸类' },
{ name: '办公文具' },
{ name: '学生文具' },
{ name: '本册类' },
{ name: '笔类' }
]
},
{
name: '网络产品', child: [
{ name: '路由器' },
{ name: '网卡' },
{ name: '交换机' },
{ name: '网络盒子' }
]
},
{
name: '游戏设备', child: [
{ name: '游戏机' },
{ name: '耳机' },
{ name: '手柄' }
]
}
],
[
{
name: '大家电', child: [
{ name: '平板电视' },
{ name: '空调' },
{ name: '冰箱' },
{ name: '洗衣机' },
{ name: '音响' }
]
},
{
name: '小家电', child: [
{ name: '电饭煲' },
{ name: '豆浆机' },
{ name: '咖啡机' },
{ name: '微波炉' },
{ name: '电烤箱' },
{ name: '热水壶' },
{ name: '电磁炉' }
]
},
{
name: '五金家装', child: [
{ name: '电动工具' },
{ name: '仪器仪表' },
{ name: '浴霸' },
{ name: '灯具' },
{ name: '电器开关' },
{ name: '电缆线' },
{ name: '龙头' },
{ name: '水槽' },
{ name: '门铃' }
]
}
],
[
{
name: '摄影摄像', child: [
{ name: '数码相机' },
{ name: '单反相机' },
{ name: '摄像机' },
{ name: '拍立得' },
{ name: '镜头' },
{ name: '摄像器材' }
]
},
{
name: '数码配件', child: [
{ name: 'sd卡' },
{ name: '读卡器' },
{ name: '相机包' },
{ name: '电池' },
{ name: '充电器' },
{ name: '支架' }
]
},
{
name: '影音娱乐', child: [
{ name: '耳机' },
{ name: '蓝牙音箱' },
{ name: '麦克风' },
{ name: '便携音箱' }
]
}
],
[
{
name: '锅具', child: [
{ name: '炒锅' },
{ name: '煎锅' },
{ name: '汤锅' },
{ name: '奶锅' },
{ name: '火锅' },
{ name: '蒸锅' },
{ name: '高压锅' }
]
},
{
name: '刀具', child: [
{ name: '菜刀' },
{ name: '剪刀' },
{ name: '水果刀' },
{ name: '多功能刀' },
{ name: '刀具套装' }
]
},
{
name: '餐具', child: [
{ name: '碗碟' },
{ name: '筷子' },
{ name: '刀叉' },
{ name: '果盘' }
]
},
{
name: '茶具', child: [
{ name: '茶杯' },
{ name: '茶壶' },
{ name: '咖啡杯' },
{ name: '茶具套装' }
]
}
]
],
day: 'day'
},
onLoad: function (options) {
this.setData({
goods: this.getGoodsValue(this.data.goodsValue)
})
},
colorchange: function (e) {
this.setData({
colorsValue: e.detail.value,
bindchange: JSON.stringify(e, null, 2)
})
},
goodchange: function (e) {
this.setData({
goodsValue: e.detail.value,
bindchange: JSON.stringify(e, null, 2)
})
},
goodcolumnchange: function (e) {
this.data.goodsValue[e.detail.column] = e.detail.value;
this.setData({
goods: this.getGoodsValue(this.data.goodsValue),
bindcolumnchange: JSON.stringify(e, null, 2)
})
},
getGoodsValue: function (selectArray) {
var dataArray = [];
dataArray.push(this.data.catagories);
var catagories1 = this.data.catagories1[this.data.catagories[selectArray[0]].index];
dataArray.push(catagories1.map(function (cur) {
return { name: cur.name };
}));
if (catagories1.length <= selectArray[1]) {
dataArray.push(catagories1[0].child);
}
else {
dataArray.push(catagories1[selectArray[1]].child);
}
return dataArray;
},
timechange: function (e) {
this.setData({
timeValue: e.detail.value,
bindchange: JSON.stringify(e, null, 2)
})
},
datechange: function (e) {
this.setData({
dateValue: e.detail.value,
bindchange: JSON.stringify(e, null, 2)
})
},
yearchange: function (e) {
this.setData({
yearValue: e.detail.value,
bindchange: JSON.stringify(e, null, 2)
})
},
monthchange: function (e) {
this.setData({
monthValue: e.detail.value,
bindchange: JSON.stringify(e, null, 2)
})
},
regionchange: function (e) {
this.setData({
regionValue: e.detail.value,
regionCodeValue: e.detail.code,
regionCode: e.detail.postcode,
bindchange: JSON.stringify(e, null, 2)
})
},
citychange: function (e) {
this.setData({
cityValue: e.detail.value,
cityCodeValue: e.detail.code,
cityCode: e.detail.postcode,
bindchange: JSON.stringify(e, null, 2)
})
},
provincechange: function (e) {
this.setData({
provinceValue: e.detail.value,
provinceCodeValue: e.detail.code,
provinceCode: e.detail.postcode,
bindchange: JSON.stringify(e, null, 2)
})
},
bindcancel: function (e) {
this.setData({
bindcancel: JSON.stringify(e, null, 2)
})
}
})