May 18, 2021 WeChat Mini Program Development Document
The base library 1.0.0 began support, low version needs to be done Compatibility 。
The scroll selector from the bottom bounce.
Attributes | type | Defaults | Required | illustrate | Minimum version |
---|---|---|---|---|---|
header-text | string | no | The title of the selector, only Android can be available | 2.11.0 | |
mode | string | selector | no | Selector type | 1.0.0 |
disabled | boolean | false | no | Is it disabled? | 1.0.0 |
bindcancel | eventhandle | no | Trigger when deselecting | 1.9.90 |
Legal value of MODE
value | illustrate | Minimum version |
---|---|---|
selector | Ordinary selector | |
multiSelector | Multi-column selector | |
time | Time selector | |
date | Date selector | |
region | Provincial urban selector |
In addition to the above-mentioned general properties, Picker has different properties for different modes.
Attribute name | type | Defaults | illustrate | Minimum version |
---|---|---|---|---|
range | array/object array | [] | When Mode is SELECTOR or MultiSelector, Range is valid. | |
range-key | string | When the Range is an Object Array, the value of Key in the object is displayed as a selector via Range-Key. | ||
value | number | 0 | Represents the first few in the range (starting from 0) | |
bindchange | eventhandle | Value changes when changing change events, Event.detail = {Value} |
Attribute name | type | Defaults | illustrate | Minimum version |
---|---|---|---|---|
range | array/object array | [] | When Mode is SELECTOR or MultiSelector, Range is valid. | |
range-key | string | When the Range is an Object Array, the value of Key in the object is displayed as a selector via Range-Key. | ||
value | array | [] | Represents the first few in the range (starting from 0) | |
bindchange | eventhandle | Value changes when changing change events, Event.detail = {Value} | ||
bindcolumnchange | eventhandle | Trigger when chase changes |
The property name | Type | The default | Description | The lowest version |
---|---|---|---|---|
value | string | Indicates the selected time in the format "hh:mm" | ||
start | string | Indicates the beginning of the valid time range, with the string format "hh:mm" | ||
end | string | Indicates the end of the valid time range, with a string format of "hh:mm" | ||
bindchange | eventhandle | Change event is triggered when value changes, event.detail . |
The property name | Type | The default | Description | The lowest version |
---|---|---|---|---|
value | string | That day | Indicates the selected date in the format "YYYYY-MM-DD" | |
start | string | Indicates the beginning of the valid date range, with the string format "YYYY-MM-DD" | ||
end | string | Indicates the end of the valid date range, with the string format "YYYYY-MM-DD" | ||
fields | string | day | The valid values year, month, and day represent the granularity of the selector | |
bindchange | eventhandle | Change event is triggered when value changes, event.detail . |
Fields Valid Value:
Value | Description |
---|---|
year | Selector granularity is year |
month | The selector granularity is the month |
day | The selector granularity is days |
The property name | Type | The default | Description | The lowest version |
---|---|---|---|---|
value | array | [] | Represents the selected province and city, with the first value of each column selected by default | |
custom-item | string | You can add a custom item to the top of each column | 1.5.0 | |
bindchange | eventhandle | When value changes, the change event event is triggered, and event.detail is . . . value, code, postcode, where the field code is the statistical dash code and the postcode is the zip code |
<view class="section">
<view class="sectiontitle">普通选择器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
当前选择: {{array[index]}}
</view>
</picker>
</view>
<view class="sectiontitle">多列选择器
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}">
当前选择: {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
<view class="section">
<view class="sectiontitle">时间选择器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
当前选择: {{time}}
</view>
</picker>
</view>
<view class="section">
<view class="sectiontitle">日期选择器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>
</view>
省市区选择器
当前选择: {{region[0]}},{{region[1]}},{{region[2]}}
Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
objectArray: [
{
id: 0,
name: '美国'
},
{
id: 1,
name: '中国'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0,
multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
objectMultiArray: [
[
{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
], [
{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
], [
{
id: 0,
name: '猪肉绦虫'
},
{
id: 1,
name: '吸血虫'
}
]
],
multiIndex: [0, 0, 0],
date: '2016-09-01',
time: '12:01',
region: ['广东省', '广州市', '海珠区']
},
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function (e) {
console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[2] = ['蛔虫'];
break;
case 2:
data.multiArray[2] = ['蚂蚁', '蚂蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃鱼'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
console.log(data.multiIndex);
break;
}
this.setData(data);
},
bindDateChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
bindTimeChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
},
bindRegionChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})