微信小程式-picker選擇器

wxml代碼：

<picker mode="selector" range='{{mingcheng}}' value='{{index}}' 
        bindchange='xuanze' class='picker1'  >
    <text>{{mingcheng[index]}}</text>
</picker>
           

mode="selector" //設定選擇器樣式

range="" // 設定每個選項的名字

value = "" // 設定下标值

bingchange="" //設定監聽事件

<text>{{mingcheng[index]}}</text> //設定顯示的位置

js代碼：

data: {
    index: 0, //預設下标
    mingcheng: ['12', '24', '36'] //選擇器中的選項    
 }
<!-- 根據選擇器改變wxml中的選項 -->
xuanze: function (e) {
    this.setData({
      xuanze: e.detail.value,
    });
  },

<!-- 需要調用時 -->

xuanze : function(e) {
    var id = this.data.index; //擷取選擇器中選擇的下标
    var mc = this.data.mingcheng[index]; //擷取選擇器中的值
    var that = this;
    that.setData({
       //寫輸出代碼
    })    
}