MPX + Vant Weapp 在微信小程序中实现Picker选择器
目录
-
- 功能概述
- 实现步骤
-
- 在MPX项目中引入Vant Weapp
- Popup与Picker组件结合实现Picker选择器
-
- 代码
- 效果
- 实现单页面中的多个Picker选择器
-
- 代码
- Picker选择器的多级联动
-
- 代码
- 效果
功能概述
- 使用MPX框架开发微信小程序时，无法使用原生的Picker选择器，经试验，可以采用Vant Weapp的UI实现。
实现步骤
在MPX项目中引入Vant Weapp
- 通过 npm 安装
npm i @vant/weapp -S - 在mpx文件中引用picker组件和popup组件（picker和popup组件结合使用才能实现选择器效果）
<script type="application/json">
{
"usingComponents": {
"van-popup": "@vant/weapp/dist/popup/index",
"van-picker": "@vant/weapp/dist/picker/index"
}
}
</script>
说明：
Vant Weapp官方文档中给出的引入组件的路径与MPX中不一样哦，MPX中需要按照组件所在路径来写
Popup与Picker组件结合实现Picker选择器
代码
<van-popup
show="{
{ showPopup }}"
position="bottom"
custom-style="height: 40%;"
bind:close="onPopupClose"
>
<van-picker
columns="{
{ conditionOptions }}"
show-toolbar
value-key="value"
default-index="{
{ 0 }}"
bind:cancel="onPickerCancel"
bind:confirm="onPickerConfirm"
/>
van-popup>
// 选择器数据
conditionOptions: [
{
id: '',
value: '全部'
},
{
id: 0,
value: '进行中'
},
{
id: 1,
value: '未开始'
},
{
id: 2,
value: '已结束'
}
],
// picker相关
openPicker() {
this.showPopup = !this.showPopup
},
onPopupClose() {
this.showPopup = false
},
onPickerChange(e) {
console.log(e)
},
onPickerCancel(e) {
this.showPopup = false
},
onPickerConfirm(e) {
const {
value, index } = e.detail
this.pickerIndex = index
this.showPopup = false
},
参数说明：
- position="bottom"底部弹出Popup
- show-toolbar属性显示Picker选择器的取消和确定两个按钮
效果
实现单页面中的多个Picker选择器
代码
<van-popup
show="{
{ showPopup }}"
position="bottom"
custom-style="height: 40%;"
bind:close="onPopupClose"
>
<van-picker
wx:if="{
{yqPicker}}"
columns="{
{ yqOptions }}"
show-toolbar
value-key="Name"
default-index="{
{ yqPickerIndex }}"
bind:cancel="onPickerCancel"
bind:confirm="onYqPickerConfirm"
/>
<van-picker
wx:if="{
{cfPicker}}"
columns="{
{ columns }}"
show-toolbar
bind:cancel="onPickerCancel"
bind:confirm="onCfPickerConfirm"
bind:change="onChange"
/>
van-popup>
参数说明：
- 没有共用同一个picker组件的原因是，默认选中项无法绑定，每次打开都是默认选中首个选项，而通过wx:if分别渲染多个不同的picker则可以实现。
Picker选择器的多级联动
代码
<van-popup
show="{
{ showPopup }}"
position="bottom"
custom-style="height: 40%;"
bind:close="onPopupClose"
>
<van-picker
wx:if="{
{cfPicker}}"
columns="{
{ columns }}"
show-toolbar
bind:cancel="onPickerCancel"
bind:confirm="onPickerConfirm"
bind:change="onPickerChange"
/>
van-popup>
// 选择器数据
this.districtOptions = [
{
"id": "440306017000",
"text": "新安街道",
"extra": null,
"children": [
{
"id": "440306017001",
"text": "宝民社区",
"extra": null,
"children": []
},
{
"id": "440306017002",
"text": "上川社区",
"extra": null,
"children": []
},
{
"id": "440306017003",
"text": "洪浪社区",
"extra": null,
"children": []
}
]
},
{
"id": "440306018000",
"text": "西乡街道",
"extra": null,
"children": [
{
"id": "440306018001",
"text": "固戍社区",
"extra": null,
"children": []
},
{
"id": "440306018002",
"text": "南昌社区",
"extra": null,
"children": []
}
]
}
]
// 设定picker选择的数据
this.columns = [
{
values:this.districtOptions,
className:'column1',
defaultIndex: 0 //默认展示第几位，可根据需求来定
},
{
values:this.districtOptions?this.districtOptions[0].children:[],
className:'column2',
defaultIndex: 0
}
]
// 点击确定，赋值给相关变量
onPickerConfirm(e) {
const {
value, index } = e.detail
this.info.Street = value[0].id
this.info.Community = value[1].id
this.info.Address = value[0].text + ' ' + value[1].text
this.showPopup = false
},
// 多级联动时，选择第一列数据时，动态修改第二列的数据
onPickerChange(e) {
const {
value, index } = e.detail
if(index == 0) {
this.columns[1].values = value[0].children
}
},
效果
