MPX + Vant Weapp 在微信小程序中实现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-popupshow="{{ showPopup }}"position="bottom"custom-style="height: 40%;"bind:close="onPopupClose"
><van-pickercolumns="{{ conditionOptions }}"show-toolbarvalue-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.detailthis.pickerIndex = indexthis.showPopup = false
},

参数说明：

position="bottom"底部弹出Popup
show-toolbar属性显示Picker选择器的取消和确定两个按钮

效果

实现单页面中的多个Picker选择器

代码

<van-popupshow="{{ showPopup }}"position="bottom"custom-style="height: 40%;"bind:close="onPopupClose"
><!-- 没有共用同一个picker组件的原因是，默认选中项无法绑定，每次打开都是默认选中首个选项，而通过wx:if分别渲染多个不同的picker则可以实现 --><van-pickerwx:if="{{yqPicker}}"columns="{{ yqOptions }}"show-toolbarvalue-key="Name"default-index="{{ yqPickerIndex }}"bind:cancel="onPickerCancel"bind:confirm="onYqPickerConfirm"/><van-pickerwx:if="{{cfPicker}}"columns="{{ columns }}"show-toolbarbind:cancel="onPickerCancel"bind:confirm="onCfPickerConfirm"bind:change="onChange" />
</van-popup>

参数说明：

没有共用同一个picker组件的原因是，默认选中项无法绑定，每次打开都是默认选中首个选项，而通过wx:if分别渲染多个不同的picker则可以实现。

Picker选择器的多级联动

代码

<van-popupshow="{{ showPopup }}"position="bottom"custom-style="height: 40%;"bind:close="onPopupClose"
><van-pickerwx:if="{{cfPicker}}"columns="{{ columns }}"show-toolbarbind: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.detailthis.info.Street = value[0].idthis.info.Community = value[1].idthis.info.Address = value[0].text + ' ' + value[1].textthis.showPopup = false
},
// 多级联动时，选择第一列数据时，动态修改第二列的数据
onPickerChange(e) {const { value, index } = e.detailif(index == 0) {this.columns[1].values = value[0].children}
},

效果

MPX + Vant Weapp 在微信小程序中实现Picker选择器相关推荐

微信小程序中的省市区选择器
微信小程序中的省市区选择器的实现在一些小程序中我们不伐会用到市区选择器,那它是如何实现的,下面展示一下,效果图. 首先在wxml这个文件中用到picker这个组件,picker是从底部加载的滚动选择 ...
小程序picker标题_微信小程序实现自定义picker选择器弹窗内容
微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容. 例如: 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: wxml 选 ...
微信小程序中Vant Weapp的引用与使用
微信小程序中Vant Weapp的引用与使用 1.安装方式 # 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @va ...
微信小程序中使用vant weapp 的dialog组件
微信小程序中使用vant weapp 的dialog组件官方文档路径:import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';,这不是 ...
Vant在微信小程序中的使用
1.创建微信小程序项目 2.在打开小程序根目录文件夹 3.在根目录文件夹中打开终端输入npm init --yes然后回车. 4.安装Vant-weapp npm安装输入:npm i @vant/ ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
五分钟学会在微信小程序中使用 vantUI 组件库
前言我们在开发微信小程序时,设计和实现好用的用户界面无疑是至关重要的一步.但是微信小程序官方自带的 UI 组件库无法满足很多使用场景,这个时候就需要我们使用一些第三方的 UI 组件库.而 vant ...
在微信小程序中使用LeanCloud（1）
之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门]https://leancloud.cn/docs/weapp.html.作为一个前端开发人员,了解后端及数据库是学习工作的需要 ...
转载：在微信小程序中生成二维码
目录转载: weapp-qrcode-canvas-2d 仓库地址测试环境使用安装方法1:直接引入 js 文件安装方法2:npm安装安装完成后调用例子1:没有使用叠加图片例子2:使用叠 ...

MPX + Vant Weapp 在微信小程序中实现Picker选择器

目录

功能概述

实现步骤

在MPX项目中引入Vant Weapp

Popup与Picker组件结合实现Picker选择器

代码

效果

实现单页面中的多个Picker选择器

代码

Picker选择器的多级联动

代码

效果

MPX + Vant Weapp 在微信小程序中实现Picker选择器相关推荐

最新文章

热门文章