微信小程序-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({
       //寫輸出代碼
    })    
}