object picker 微信小程序_微信小程序 demo分享
選擇器示例demo：
1.普通選擇器 2.多列選擇器 3.時間選擇器 4.日期選擇器 5.省市區選擇器
wxml
普通選擇器：(普通數組)
當前選擇：{{array[index]}}
普通選擇器2：(普通json格式數組)
當前選擇：{{objectArray[objectIndex].name}}
多列選擇器：
當前選擇：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}
時間選擇器：
當前選擇: {{time}}
日期選擇器：
當前選擇: {{date}}
省市區選擇器：
當前選擇：{{region[0]}}，{{region[1]}}，{{region[2]}}
js
Page({
data: {
//普通選擇器：(普通數組)
array: ['選項1', '選項2', '選項3', '選項4'],
index: 0,//默認顯示位置
//普通選擇器2：(普通json格式數組)
objectArray: [
{
id: 0,
name: '中國'
},
{
id: 1,
name: '美國'
},
{
id: 2,
name: '德國'
},
{
id: 3,
name: '法國'
}
],
objectIndex: 0,//默認顯示位置
//多列選擇器：
multiArray: [['音頻', '視頻'], ['mp3', '評書']],//二維數組，長度是多少是幾列
multiIndex: [0, 0],
//時間選擇器：
time: '12:01',
//日期選擇器：
date: '2016-09-01',
//省市區選擇器：
region: ['請選擇', '請選擇', '請選擇'],
customItem: '請選擇'//為每一列的頂部添加一個自定義的項
},
//普通選擇器：
bindPickerChange: function (e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
index: e.detail.value
})
},
//普通選擇器2：
bindPickerChange2: function (e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
objectIndex: 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);
if (e.detail.column==0){//第1列
if (e.detail.value == 0) {//音頻
this.setData({
multiArray: [['音頻', '視頻'], ['mp3', '評書']]
})
};
if (e.detail.value == 1) {//視頻
this.setData({
multiArray: [['音頻', '視頻'], ['電影', '電視劇']]
})
};
};
},
//時間選擇器：
bindTimeChange: function (e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
time: e.detail.value
})
},
//日期選擇器：
bindDateChange: function (e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
date: e.detail.value
})
},
//省市區選擇器：
bindRegionChange: function (e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
css
/*選擇器 */
.section__title{
margin-bottom: 20rpx;
}
.section{
margin: 50rpx 0;
font-size: 30rpx;
}
效果圖如下
獲取多項選擇器的值：
多列選擇器：
當前選擇：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}
Page({
data:{
//多列選擇器：
multiArray: [['音頻', '視頻'], ['mp3', '評書']],//二維數組，長度是多少是幾列
multiIndex: [0, 0],
},
//多列選擇器：
bindMultiPickerChange: function (e) {
this.setData({
multiIndex: e.detail.value
})
console.log('1為：', this.data.multiArray[0][e.detail.value[0]])
console.log('2為：', this.data.multiArray[1][e.detail.value[1]])
},
})
歡迎各位學習微信小程序的小伙伴私信我，大家一起進步呀！
總結
以上是生活随笔為你收集整理的object picker 微信小程序_微信小程序 demo分享的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高尔夫球多少钱啊？
- 下一篇： 公众平台模板消息所在行业_第三方工具微信