最近在学着写mpvue小程序，在做选择控件时候遇到了点问题，按照微信小程序方法picker，很不方便！
在网上搜到一个很好用的组件下面给大家分享：
组件说明文档链接：https://go.ctolib.com/article/wiki/84754
我想说的是：按照说明文档并不能实现picker，后来幸运的是，作者有一个
源码链接：https://github.com/MPComponent/mpvue-picker
通过读源码，最后实现了picker
我用的是二级联动：
方法是：
首先：
安装 mpvue-picker
npm install mpvue-picker --save
然后页面代码为：
<template>
<div class="time-box male">
<mpvue-picker class="time-box male" :mode="mode" :deepLength=deepLength ref="mpvuePicker" :pickerValueArray="pickerValueArray" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"></mpvue-picker>
<div class="time-box" @click="showPicker">
<image class="time-img" src='../../static/images/newest/time.png'/>
<text class="time-text">按期查询</text>
</div>
</div>
</template> <script>
import mpvuePicker from "mpvue-picker"; export default {
components: {
mpvuePicker
},
data() {
return {
allBulletin: [],
mode: 'selector',
deepLength: 0, // 几级联动
pickerValueDefault: [], // 初始化值
pickerValueArray: [], // picker 数组值
pickerText: '',
mulLinkageTwoPicker: [
{
label: '飞机',
value: 0,
children: [
{
label: '经济舱',
value: 1
},
{
label: '商务舱',
value: 2
}
]
},
{
label: '火车票',
value: 1,
children: [
{
label: '卧铺',
value: 1
},
{
label: '坐票',
value: 2
},
{
label: '站票',
value: 3
}
]
},
{
label: '汽车票',
value: 3,
children: [
{
label: '快班',
value: 1
},
{
label: '普通',
value: 2
}
]
}
],
pickerValueDefault: [0,0]
};
},
onLoad() {
var newest = String(this.$mp.query.type);
this.$http
.post(
"https://tashimall.miniprogram.weixin-api-test.yokead.com/bulletin/getBulletin.json",
"type=" + newest
)
.then(res => {
//输出请求数据
this.allBulletin = res.data.data;
})
.catch(err => {
console.log(err.status, err.message);
});
},
methods: {
showPicker() {
this.pickerValueArray = this.mulLinkageTwoPicker;
this.mode = 'multiLinkageSelector';
this.deepLength = 2;
this.pickerValueDefault = [1, 0];
this.$refs.mpvuePicker.show();
console.log(this);
},
onConfirm(e) {
console.log(e);
}
}
};
</script> <style>
.time-box {
display: flex;
align-items: center;
justify-content: center;
float: left;
width: 210rpx;
height: 64rpx;
background: #ff8308;
border-radius: 15rpx;
}
.male {
margin-left: 22rpx;
}
.time-img {
width: 36rpx;
height: 36rpx;
}
.time-text {
font-size: 28rpx;
color: #fff;
margin-left: 10rpx;
}
</style>
需要注意的是：如果你是其他（单列，多列，二级联动，三级联动）中的任意一种，务必看源码。
地址是：
https://github.com/MPComponent/mpvue-picker