场景：对于小程序官方提供的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.效果
5.说明
5.1 官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html
5.2 给picker-view绑定 bindchange 事件，监听其变化，通过变量记录其值，当在两种状态切换时，分别记录，保存时看处于哪个tab下，再取值做相应的操作即可。