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

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

1.wxml

<!-- 楼层的picker -->
<view class='lcBtn flex flexC'><view class='lcBtn-style bg_white {{currentIndex==1?"on":""}}' data-num='1' bindtap='changeLc'>单层</view><view class='lcBtn-style bg_white {{currentIndex==2?"on":""}}' data-num='2' bindtap='changeLc'>跃层</view>
</view><!--   --><view class='pickerAll' wx:if="{{true}}"><view class='flex' wx:if="{{currentIndex==1}}"><!-- 第一列 --><!-- {{'['+value1[0]+']'}} --><picker-view indicator-style="height: 50px;" style="width: 50%; height: 300px;" value="{{value1[0]}}" data-kind="1" bindchange="bindChange"><picker-view-column><view wx:if="{{dcArr[0].length}}" wx:for='{{dcArr[0]}}' style="line-height: 50px">第 {{item}} 层</view></picker-view-column></picker-view><!-- 第二列 --><picker-view indicator-style="height: 50px;" style="width: 50%; height: 300px;" value="{{value1[1]}}" data-kind="2" bindchange="bindChange"><picker-view-column><view wx:if="{{dcArr[1].length}}" wx:for='{{dcArr[1]}}' style="line-height: 50px">共 {{item}} 层</view></picker-view-column></picker-view></view><view class='flex flexC' wx:if="{{currentIndex==2}}"><!-- 第二列 --><picker-view indicator-style="height: 50px;" style="width: 33%; height: 300px;" value="{{value1[2]}}" data-kind="3" bindchange="bindChange"><picker-view-column><view wx:if="{{dcArr[2].length}}" wx:for='{{dcArr[2]}}' style="line-height: 50px">第 {{item}} 层</view></picker-view-column></picker-view><!-- 第一列 --><picker-view indicator-style="height: 50px;" style="width: 33%; height: 300px;" value="{{value1[3]}}" data-kind="4" bindchange="bindChange"><picker-view-column><view wx:if="{{dcArr[3].length}}" wx:for='{{dcArr[3]}}' style="line-height: 50px">至 {{item}} 层</view></picker-view-column></picker-view><!-- 第二列 --><picker-view indicator-style="height: 50px;" style="width: 33%; height: 300px;" value="{{value1[4]}}" data-kind="5" bindchange="bindChange"><picker-view-column><view wx:if="{{dcArr[4].length}}" wx:for='{{dcArr[4]}}' style="line-height: 50px">共 {{item}} 层</view></picker-view-column></picker-view></view><view class='flex flexC pickerBtn'><view class='pickerBtn-style col_gray' bindtap='goBack'>取消</view><view class='pickerBtn-style col_orange' bindtap='goConfirm'>确认</view></view></view>

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.效果