# picker
Start from base library version 1.0.0. Please remaining backward compatible.
A rolling selector that pops up from the bottom.
attribute | type | Default value | Required | Introductions | Minimum version |
---|---|---|---|---|---|
header-text | string | no | Selector Title, available for Android only | 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 | Triggered when deselect | 1.9.90 |
mode Legal value
value | Introductions | Minimum version |
---|---|---|
selector | Common selector | |
multiSelector | Multi-column selector | |
time | Time selector | |
date | Date picker | |
region | Provincial urban selector |
In addition to the general properties above, for different modes,picker
Have different properties.
# Common selector: mode = selector
Attribute name | type | Default value | Introductions | Minimum version |
---|---|---|---|---|
range | array/object array | [] | mode for selector or multiSelector Range effective | |
range-key | string | when range It's a... Object Array When the range-key To specify Object in key Displays content as a selector | ||
value | number | 0 | Indicate that you have chosen range Whose subscript is derived from the 0 Start.) | |
bindchange | eventhandle | value Triggered when changed change Event, event.detail = {value} |
# Multiple column selector: mode = multiSelector
Attribute name | type | Default value | Introductions | Minimum version |
---|---|---|---|---|
range | array/object array | [] | mode for selector or multiSelector Range effective | |
range-key | string | when range It's a... Object Array When the range-key To specify Object in key Displays content as a selector | ||
value | array | [] | Indicate that you have chosen range Whose subscript is derived from the 0 Start.) | |
bindchange | eventhandle | value Triggered when changed change Event, event.detail = {value} | ||
bindcolumnchange | eventhandle | Triggered when column changes |
# Time picker: mode = time
Attribute name | type | Default value | Introductions | Minimum version |
---|---|---|---|---|
value | string | Indicates the selected time in the format "hh: mm" | ||
start | string | Represents the beginning of a valid time range, with the string format "hh: mm" | ||
end | string | Represents the end of a valid time range, with the string format "hh: mm" | ||
bindchange | eventhandle | value Triggered when changed change Event, event.detail = {value} |
# Date picker: mode = date
Attribute name | type | Default value | Introductions | Minimum version |
---|---|---|---|---|
value | string | Same day | Represents the selected date in the format "YYYY-MM-DD" | |
start | string | Represents the start of a valid date range, with a string format of "YYY-YM-MD-DD" | ||
end | string | Represents the end of a valid date range in the string format "YYY-MM-DD" | ||
fields | string | day | Valid value Year, month, day, represents the granularity of the selector | |
bindchange | eventhandle | value Triggered when changed change Event, event.detail = {value} |
fields Valid value:
value | Introductions |
---|---|
year | Selector granularity is year |
month | Selector granularity is month |
day | Selector granularity is day |
# Provincial and municipal selectors: mode = region 1.4.0
Attribute name | type | Default value | Introductions | Minimum version |
---|---|---|---|---|
value | array | [] | Represents the selected province, with the first value in 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 | value Triggered when changed change Event, event.detail = {value, code, Postcode}, where the fields code Is a statistical zoning code, postcode It's a zip code. |
# sample code
<view class="section">
<view class="section__title">Common selector</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
Current selection: {{array[index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">Multi-column selector</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
Current selection: {{MultiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">Time selector</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
Current Selection: {{time}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">Date picker</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
Current Selection: {{date}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">Provincial urban selector</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
Current selection: {{region[0]}},{{region[1]}},{{region[2]}}
</view>
</picker>
</view>
Page({
data: {
array: ["America", "China", 'Brazil ', "Japan"],
objectArray: [
{
id: 0,
name: "America"
},
{
id: 1,
name: "China"
},
{
id: 2,
name: "Brazil"
},
{
id: 3,
name: "Japan"
}
],
index: 0,
multiArray: [[Spineless animals, "Spinal animals"], ['Flatness', 'linear animals', "Annelid", "Mollusca", "arthropod"], [Pork tapeworm. 'bloodsucking bug']],
objectMultiArray: [
[
{
id: 0,
name: "Spineless animals"
},
{
id: 1,
name: "Spinal animals"
}
], [
{
id: 0,
name: "Flat animal"
},
{
id: 1,
name: 'linear animal'
},
{
id: 2,
name: "annelid"
},
{
id: 3,
name: "mollusk"
},
{
id: 3,
name: "arthropod"
}
], [
{
id: 0,
name: Pork tapeworm
},
{
id: 1,
name: 'bloodsucking bug'
}
]
],
multiIndex: [0, 0, 0],
date: '2016-09-01',
time: '12:01',
region: ['Guangdong province ', 'Guangzhou City ', Haizhu district],
customItem: "All"
},
bindPickerChange: function(e) {
console.log('picker sends selection change, carries value of ', e.detail.value)
this.setData({
index: and.detail.value
})
},
bindMultiPickerChange: function (e) {
console.log('picker sends selection change, carries value of ', e.detail.value)
this.setData({
multiIndex: and.detail.value
})
},
bindMultiPickerColumnChange: function (e) {
console.log('Modified listing ', and.detail.column, ', with a value of', e.detail.value)
where data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
}
data.multiIndex[and.detail.column] = and.detail.value
switch (and.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['Flatness', 'linear animals', "Annelid", "Mollusca", "arthropod"]
data.multiArray[2] = [Pork tapeworm. 'bloodsucking bug']
break
case 1:
data.multiArray[1] = ["Fish," "Amphibians", "Reptile"]
data.multiArray[2] = [Crucian carp, Hairtail]
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] = [Pork tapeworm. 'bloodsucking bug']
break
case 1:
data.multiArray[2] = [Ascaris lumbricoides]
break
case 2:
data.multiArray[2] = ["Ant", "Leech"]
break
case 3:
data.multiArray[2] = [Mussel, "Snail", "Slugs"]
break
case 4:
data.multiArray[2] = ["Insects," "Crustaceans", "Arachnid", "Myriapod"]
break
}
break
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = [Crucian carp, Hairtail]
break
case 1:
data.multiArray[2] = ["Frog", "The Salamander"]
break
case 2:
data.multiArray[2] = ["Lizard", "Turtle", "Gecko"]
break
}
break
}
data.multiIndex[2] = 0
break
}
console.log(data.multiIndex)
this.setData(data)
},
bindDateChange: function(e) {
console.log('picker sends selection change, carries value of ', e.detail.value)
this.setData({
date: and.detail.value
})
},
bindTimeChange: function(e) {
console.log('picker sends selection change, carries value of ', e.detail.value)
this.setData({
time: and.detail.value
})
},
bindRegionChange: function (e) {
console.log('picker sends selection change, carries value of ', e.detail.value)
this.setData({
region: and.detail.value
})
}
})
The translations are provided by WeChat Translation and are for reference only. In case of any inconsistency and discrepancy between the Chinese version and the English version, the Chinese version shall prevail.Incorrect translation. Tap to report.