# 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
})
}
})