選擇器示例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分享的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。