1. 程式人生 > >微信小程式基於picker的級聯選單

微信小程式基於picker的級聯選單

<view >
  <picker bindchange="bindPickerChange0" value="{{brandindex}}" range="{{brands}}">
    <view class="picker">
      品牌:{{brands[brandindex]}}
    </view>
  </picker>
</view>

<view >
  <picker bindchange="bindPickerChange1" value="{{index1}}" range="{{object}}">
    <view class="picker">
      配件類別:{{object[index1]}}
    </view>
  </picker>
</view>

data: {
    brands: [],
    objectArray: [
      {
        brand:"博世",
        id: 0,
        array: ["博世噴油器配件", "博世感測器", "傑克賽爾配件", "博世油泵配件", "博世共軌管配件","博世泵噴嘴"]
      },
      {
        brand: "德爾福",
        id: 1,
        array: ["德爾福噴油器配件", "德爾福感測器", "德爾福油泵", "德爾福共軌管配件", "德爾福濾清器", "德爾福電腦版ECU", "德爾福機油", "德爾福維修部件"]
      },
      {
        brand: "卡特",
        id: 2,
        array: ["卡特感測器", "卡特C7C9泵噴嘴","卡特共軌配件"]
      },
      {
        brand: "康明斯",
        id: 3,
        array: ["西康配件", "東風康明斯","福田康明斯"]
      }
    ],
    object:[],
    brandindex:0,
    index1:0
  },
  onLoad:function(){
    var objectArray = this.data.objectArray
    var brands=[]
    for (var i = 0; i < objectArray.length;i++){
      brands.push(objectArray[i].brand,) 
    }
    this.setData({ brands: brands ,object: objectArray[this.data.brandindex].array})
  },
  bindPickerChange0: function (e) {
    this.setData({ brandindex: e.detail.value, index1:0 })
    var  objectArray = this.data.objectArray
    this.setData({ object: objectArray[this.data.brandindex].array})
  },
  bindPickerChange1: function (e) {
    this.setData({
      index1: e.detail.value
    })
  },