小程序多列选择器的使用

记录是为了更好的成长！

 

话不多说，直接上代码！

 1、页面

 

<view class="section">
  <view class="section__title">多列选择器</view>
  <picker mode="selector" bindchange="bindPickerChange" value="{{index}}" range="{{array}}" range-key="{{'name'}}">
    <view class="picker">
      当前选择：{{array[index].name}}
    </view>
  </picker>
</view>

 

 

2、js

Page({

  data: {
    array:[
      {
        name:'请选择类型'
      }
    ],
    index: 0,
    goods:{
      id:1,
      name:'电视机',
      type:'家电'
    }
  },

  onLoad: function (options) {
    var that = this
    wx.request({
      url: 'http://192.168.0.168:8090/findAllType',
      success: function (res) {
        that.setData({
          array: that.data.array.concat(res.data)
        })
        if (that.data.goods.type != '') {
          for (var i = 0; i < that.data.array.length; i++) {
            if (that.data.goods.type == that.data.array[i].name) {
              that.setData({
                index: i
              })
              break;
            }
          }
        }
      } 
    })
  },
  bindPickerChange:function(e){
    var that = this
    that.setData({
      index: e.detail.value
    })
  }

})

 

 

 

 

以上内容代表个人观点，仅供参考，不喜勿喷。。。

 

来源：https://www.cnblogs.com/newbest/p/10822535.html