小程序picker二级联动封装

这几天做小程序因为项目里要做个行业分类的二级联动，想到了小程序自带的picker插件，对照实例看了一下发现，小程序picker实例的数据来源格式跟我的项目接口返回的数据格式不太一样，而且是三级联动，所以我准备把这个实例结构改一下，封装起来，让大家直接可以拿过来用。

看一下成果展示和我的数据格式，如果数据格式和你们正在做的项目一样，那么就可以直接复制源代码使用了，如果不一样，看一下和小程序官方实例这个数据格式是不是一样。

成果展示.gif

ff.png

我的项目接口返回的数据格式是每一项都有一个子项（childern）字段；

1.好了，接下来第一步，我们把小程序picker官方实例导入进来，删除没用的单选和时间地址的picker(wxml和js里无关代码都删除)，留下一个多选择器功能的代码。
2.修改wxml，因为是二级联动，所以要把实例中的第三级{{multiArray[2][multiIndex[2]]}}给删除。

 
      
        {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}

最后wxml文件中完整的代码应该是这样。

3.修改js文件，删除后的js文件是下面这样。

Page({
  data: {
     multiArray: [],
     multiIndex: [0, 0],
 }
  bindMultiPickerChange: function (e) {
  },
  bindMultiPickerColumnChange: function (e) {
  }
})

剩下就是我们随心所欲的往里面写自己的内容了，因为是要封装组件使用，所以要先使用attached(){}这个方法，让组件调用时候就执行代码。

attached(){
    this.getIndustry();
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 获取行业分类checkCorp.industry
    getIndustry() {
      let that = this;
      httpPost(xxxx接口地址xxxx, {}, res => {
        if (res.code == httpCode.success) {
          console.log(res.data);
          let temporary = {          //--------------因为接口数据返回的是从第一项开始的，这里加一个请选择选项放入数据的开头
            label:"请选择",
            value:"0",
            children:[{label:'',value:'0'}]
          }
          let firstList = res.data; //---------------------将一级分类数组放入新的变量里便于操作
          firstList.unshift(temporary);
          console.log(firstList);
          let industryName = firstList.map(m => {
            return m.label            //------------------------获取一级下拉列表的名称
          });
          that.setData({
            multiArray: [industryName, []],      //----------- 将一级列表的名称存入二维数组的第一项
            firstList,                    // ------------一级的完整数据 先存着后面有用
            industryName                //---------------一级的名称 先存着后面有用
          });
          let industryOneId = firstList[0]['value'];  //  一级菜单默认的value
          if (industryOneId) {
            that.searchClassInfo(industryOneId);  //如果存在，去掉取相应数组下的list
          }

        }
      })
    },

上面是第一部分代码，我尽量都采用这种代码附注释的方式逐行讲解。httpPost是我封装的一个post请求，最下面会贴出来。

下面代码接this.searchClassInfo()这个方法，把一级的value拿到，其实这个value就是id。searchClassInfo()方法的主要步骤就是：

将一级下拉选中的value取下来

2.根据存下来的value去firstList里找到相同value的那一项

3.将相同项下的children字段存下来，并且遍历出其下的label字段放入二维数组的第二位中。

searchClassInfo(value) {
      let that = this;
      if (value) {
        that.setData({
          industryOneId: value   //这个是一级列表中用户选中的value
        });
        that.data.firstList.map(m => {  //firstList是一级分类的数组，上方代码里有
          if (m.value == value) {  //通过比对查出value对应的这一列
            that.setData({
              secondList: m.children   //用户选中的一级分类中的children就是第二列的列表
            })
          }
        });
        // console.log(that.data.secondList);
        let industryTwoName = that.data.secondList.map(m => {
          return m.label    //再遍历secondList把所有的label取出来放入industryTwoName 中用于二级列表的展示
        });
        // console.log(industryTwoName);
        let industryName = that.data.industryName;
        that.setData({
          multiArray: [industryName, industryTwoName],  //这就是一个完整的二级联动展示了
          industryTwoName,
        })
      }
    },

然后我们要他的滚动状态进行监听 ,小程序案例中给了这个方法：bindcolumnchange="bindMultiPickerColumnChange"，我们直接拿他接着写

    bindMultiPickerColumnChange: function (e) {
      let that = this;
      console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
      var data = {
        multiArray: that.data.multiArray,
        multiIndex: that.data.multiIndex
      };
      data.multiIndex[e.detail.column] = e.detail.value;  //从这以上的代码是案例自带的没有删除的。
/************************************************************/
      let industryOneId_session = that.data.industryOneId;   //  先将滚动前的一级菜单id存下来，便于之后做对比
      switch (e.detail.column) {
        case 0:
          let firstList = that.data.firstList;
          var firstId = firstList[e.detail.value]['value'];
          if (industryOneId_session != firstId) { //每次滚动的时候都去和上一个做一次对比
            that.searchClassInfo(firstId); // 只要不一样，就去执行上面searchClassInfo()这个方法
          }
          data.multiIndex[1] = 0;
          break;
      }
  
    }

最后我们需要确定他的改变事件，bindchange="bindMultiPickerChange";

  bindMultiPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value);
      var secondList = this.data.secondList;
      var select_key = e.detail.value[1];     //去二维数组中第二项的下标取出来，也就是二级下拉菜单的下标值
      this.setData({
        industryTwoId: secondList[select_key]['value']　　　　　　//  拿到下标值对应的value值就是我们要用的id
      })
    
      this.setData({
        multiIndex: e.detail.value   
      });
      // 通过triggerEvent绑定的myEvent方法，把一级下拉的id和二级下拉的id拿出来
      this.triggerEvent('myEvent', { industryOneId: this.data.industryOneId, industryTwoId: this.data.industryTwoId})
    },

这样的话，组件就封装好了，别的页面调用的话也很简单

先在json中引入

然后。。

bind:myEvent绑定的getData()方法可以取出组件中传过来的一级id和二级id；

  getData(e){
      let data = e.detail;
      this.setData({
        industryOneId: data.industryOneId,
        industryTwoId: data.industryTwoId
      });
    console.log(this.data.industryOneId);
    console.log(this.data.industryTwoId);
  },

321.png

最后附上封装的post方法代码。

// post请求
function httpPost(url, data, cb) {
  wx.request({
    url: 'xxx Ip地址 xxx' + url,
    data: data,
    method: 'POST',
    header: {
     'content-type': 'application/x-www-form-urlencoded',
    },
    success: function (res) {
      return typeof cb == "function" && cb(res.data)
    },
    fail: function () {
      return typeof cb == "function" && cb(false)
    }
  })
}

小程序picker二级联动封装

你可能感兴趣的:(小程序picker二级联动封装)