picker-view 和 picker-view-column 自定义可以切换的picker

场景：对于小程序官方提供的picker基本能满足大多数需求，但如果涉及类似于在picker的弹出层上进行两种不同类型的picker切换，还是无法实现的。但官方最近新提供了picker-view ，可根据自己的使用场景来自定义自己的picker。

1.wxml

  单层
  跃层






  
    
    
    
      
        第 {{item}} 层
      
    
    
    
      
        共 {{item}} 层
      
    
  

  
    
    
      
        第 {{item}} 层
      
    
    
    
      
        至 {{item}} 层
      
    
    
    
      
        共 {{item}} 层
      
    
  

  
    取消
    确认
  

2.wxss

page{
  padding: 0 20rpx;
  box-sizing: border-box;
}

.lcBtn-style{
  width: 200rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  border: 1rpx solid orange;
  font-size: 26rpx;
  border-radius: 10rpx;
  margin-right: 10rpx;
  margin-top: 10rpx;
}

.lcBtn-style.bg_orangge{
  background-color: orange;
}
.lcBtn-style.col_fff{
  color: #fff;
}

.lcBtn-style.bg_white{
  background-color: white;
}

.lcBtn-style.on{
  color: #fff;
  background-color: orange;
}

picker-view-column{
  text-align: center;
}

.pickerBtn{
  margin-top: 50rpx;
}

.pickerBtn-style{
  font-size: 26rpx;
  height: 50rpx;
  line-height: 50rpx;
  width: 200rpx;
  text-align: center;
  border: 1rpx solid gray;
  margin-right: 30rpx;
  border-radius: 10rpx;

}

.pickerBtn-style.col_gray{
  color: gray;
}
.pickerBtn-style.col_orange{
  color: orange;
}

.pickerAll{
  margin-top: 20rpx;
}

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: box;
  flex-wrap:wrap;
}

.flexC {
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
}

3.js

var app = getApp();
var that;
var source_arr;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex: 1,
    // 单层
    dcArr: [
      [],
      [],
      [],
      [],
      []
    ],
    dcIndex: [
      [0],
      [0],
      [0],
      [0],
      [0]
    ],
    value1: [
      [0],
      [0],
      [0],
      [0],
      [0],
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    that = this;

    // 数据生成
    that.sourceArray();

  },
  // 原始数组
  sourceArray() {
    var arr = []
    for (var i = -5; i < 50; i++) {
      if (i) {
        arr.push(i)
      }
    }

    source_arr = arr;
    
    var arr2 = source_arr.slice(0);
    arr2.pop()
    var arr3 = source_arr.slice(0);
    arr3.splice(0, 1);
    var arr4 = source_arr.slice(0);
    arr4.splice(0, 1);

    that.setData({
      'dcArr[0]': source_arr.slice(0),
      'dcArr[1]': source_arr.slice(0),
      'dcArr[2]': arr2,
      'dcArr[3]': arr3,
      'dcArr[4]': arr4,
    });
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },


  // 监听，滑动到第几个
  bindChange(e) {
    var kind = e.currentTarget.dataset.kind;
    var value = e.detail.value;

    // 单层：第一列
    if (kind == 1) {
      var arr = source_arr.slice(0);
      arr.splice(0, value[0]);
      that.setData({
        'dcArr[1]': arr,
        'dcIndex[1]': [0],
        'value1[1]': [0],
        'dcIndex[0]': value
      });

    } else if (kind == 2) {
      // 单层：第二列
      that.setData({
        'dcIndex[1]': value
      });

    } else if (kind == 3) {

      var arr = source_arr.slice(0);
      arr.splice(0, (value[0] + 1));
      var arr_new1 = arr.slice(0);
      var arr_new2 = arr.slice(0);

      that.setData({
        'dcArr[3]': arr_new1,
        'dcArr[4]': arr_new2,
        'dcIndex[3]': [0],
        'dcIndex[4]': [0],
        'value1[3]': [0],
        'value1[4]': [0],
        'dcIndex[2]': value
      });

    } else if (kind == 4) {
      that.setData({
        'dcIndex[3]': value,
      });

    } else if (kind == 5) {
      that.setData({
        'dcIndex[4]': value
      });

    }

  },

  // 取消按钮
  goBack() {
    
  },
  // 确认按钮
  goConfirm() {

    // 点击确认时才储存在全局变量，否则不储存
    var dcArr = that.data.dcArr;
    var dcIndex = that.data.dcIndex;
    var currentIndex = that.data.currentIndex;

    // 在这里通过不同的下标，可取到，不同的tab下对应的当前项

  },
  // 楼层切换
  changeLc(e) {
    var num = e.currentTarget.dataset.num;
    if (num == 1) {
      that.setData({
        currentIndex: 1,
      });
    } else if (num == 2) {
      that.setData({
        currentIndex: 2,
      });
    }

  },
})

4.效果

5.说明

5.1 官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html

5.2 给picker-view绑定 bindchange 事件，监听其变化，通过变量记录其值，当在两种状态切换时，分别记录，保存时看处于哪个tab下，再取值做相应的操作即可。