小程序：三列选择器

三列选择器

<picker mode='multiSelector' range='{'{mutilarr}'}' value='{'{mutindex}'}' bindcolumnchange='columchange' bindchange='changemutil'>
  <view>{`{mutilarr[0][mutindex[0]]}`}年-{`{mutilarr[1][mutindex[1]]}`}月-{`{mutilarr[2][mutindex[2]]}`}日</view>
</picker>

在data里面声明变量

 data: {
    mutilarr:[],//总
    mutindex:[0,0,0],
    montharr:'',
    dayarr:'',
    picerArr:'',
  }

在进入页面请求数据并渲染，此步骤可以根据业务逻辑更改

 onShow: function () {
    let that=this;
    wx.request({
      url: 'https://www.easy-mock.com/mock/5c34ac7190862b0b0cf50397/Smlevue/wx',
      method:"get",
      success(res){
        console.log(res);
        let dataArr=res.data.tuanqi;
        let yearArr=[];
        let montharr=[];
        let dayArr=[];
        let picerArr=[];
        for(let i=0;i<dataArr.length;i++){
          yearArr[i]=dataArr[i].year;
          montharr[i]=[];
          dayArr[i]=[];
          picerArr[i]=[];
          let mouthelist=dataArr[i].montharr;
          for(let y=0;y<mouthelist.length;y++){
            montharr[i][y] = mouthelist[y].month;
            dayArr[i][y]=[];
            picerArr[i][y]=[];
            let daylist = mouthelist[y].dayarr;
            for(let k=0;k<daylist.length;k++){
              dayArr[i][y][k]=daylist[k].day;
              picerArr[i][y][k] = daylist[k].price
            }
          }
        };
        let mutilarr=[];
        mutilarr[0]=yearArr;
        mutilarr[1]=montharr[0];/*拿到所有月份的中的第一列数据*/
        mutilarr[2]=dayArr[0][0];/*拿到所有天数中第一列数据*/
        console.log(mutilarr)
        that.setData({
          mutilarr: mutilarr,
          montharr:montharr,
          dayArr:dayArr,
          picerArr:picerArr
        })
      }
    })
  }

监听picker 变换进行数据改变

某一列的值改变时触发

 
  columchange(e){
    console.log("修改的列为",e)
    let that=this;
    let column = e.detail.column;/*改变了第几列*/
    let value=e.detail.value;/*下标*/
    let yeaArr=this.data.yeaArr;
    let montharr=this.data.montharr;
    let dayArr=this.data.dayArr;
    let mutindex = this.data.mutindex;
    let mutilarr = this.data.mutilarr;
    mutindex[column]=value;/*改变选中的下标*/
    for(let i=column+1;i<mutindex.length;i++){
      /*被修改的列旁边的列下标为1*/
      mutindex[i]=0;
    }
    console.log(mutindex) /*被修改的列旁边的列下标为1*/
    console.log(column)
    console.log(montharr)
    console.log(dayArr)
    switch (column) {/*当滑动第一列的时候也就是case等于0的时候，改变mutilarr数组里面的第二和第三的值*/
      case 0:
        mutilarr[1] = montharr[mutindex[0]];/*获取年份对应的所有月份*/
        mutilarr[2] = dayArr[mutindex[0]][mutindex[1]];/*获取年份对应的所有月份中第一个月份对应的天数*/
        break;
      case 1:
        mutilarr[2] = dayArr[mutindex[0]][mutindex[1]];/*第二列改变的时候获取所选月份对应的天数*/
     
    };
    that.setData({
      mutindex: mutindex,
      mutilarr: mutilarr
    })
  },

value 改变时触发 change 事件

  changemutil(e){
    let i = e.detail.value;
    /*[i[0]][i[1]][i[2]]获取选中的天数对应的价格*/
    var pricelist = this.data.picerArr[i[0]][i[1]][i[2]];
    console.log(pricelist)
  },