微信小程序-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({
       //写输出代码
    })    
}