从底部弹起的滚动选择器。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|
| header-text | String | | 否 | 选择器标题 | |
| mode | String | selector | 否 | 选择器类型 | |
| disabled | Boolean | false | 否 | 是否禁用 | |
| bindcancel | EventHandle | | 否 | 取消选择时触发 | |
| 属性 | 类型 | 默认值 | 说明 | 最低版本 |
|---|
| 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} | |
| 属性 | 类型 | 默认值 | 说明 | 最低版本 |
|---|
| 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 | | 列改变时触发 | |
| 属性 | 类型 | 默认值 | 说明 | 最低版本 |
|---|
| 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} | |
| 属性 | 类型 | 默认值 | 说明 | 最低版本 |
|---|
| 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 | 选择器粒度为天 | |
| 属性 | 类型 | 默认值 | 说明 | 最低版本 |
|---|
| value | Array | [] | 表示选中的省市区，默认选中每一列的第一个值 | |
| custom-item | String | | 可为每一列的顶部添加一个自定义的项 | |
| level | String | region | 选择器层级 | |
| bindchange | EventHandle | | value 改变时触发 change 事件，event.detail = {value, code, postcode}，其中字段 code 是统计用区划代码，postcode 是邮政编码 | |
level 的有效值：
| 值 | 说明 | 最低版本 |
|---|
| province | 省级选择器 | |
| city | 市级选择器 | |
| region | 区级选择器 | |
示例代码：
<!--pages/component/pages/picker/picker.mcml-->
<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>
// pages/component/pages/picker/picker.js
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)
})
}
})