小程序多列選擇器的使用

記錄是為了更好的成長！

 

話不多說，直接上代碼！

 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
    })
  }

})

 

 

 

 

以上內容代表個人觀點，僅供參考，不喜勿噴。。。