微信小程序云开发之弹窗选择器

在用户进行填写表单时，往往有一些内容是固定的。比如身份特征、学历等等这些。开发者通过选择器能够减少用户的文字输入，从而提高用户体验度。

接下来，我就通过vant组件来展示弹窗选择器。

当前，前提是你安装了Vant,如果还未安装，可去官网进行查看安装。

安装完之后，引入组件模块：
在app.json文件中：

"usingComponents": {
"van-picker": "vant-weapp/picker/index",
 "van-popup": "vant-weapp/popup/index",
 "van-cell": "vant-weapp/cell/index"
 }

因为是要做弹窗选择器，又要弹窗又要选择器。所以要使用两个组件。

弹窗组件：popup
选择器组件：picker
点击事件组件：cell

wxml:

<van-cell title="选择学历" is-link bind:click="showPopup" />

<van-popup 
show="{{ show }}" 
bind:close="onClose"
position="bottom"
custom-style="height: 30%;">
<van-picker
  show-toolbar
  title="学历"
  columns="{{ columns }}"
  bind:cancel="onCancel"
  bind:confirm="onConfirm"
/>
</van-popup>

js:

import toast from '../../miniprogram_npm/vant-weapp/toast/toast';
//导入toast的路径由你的项目路径决定，toast是vant组件中的一个模块
Page({
    data: {
        show: false,
        columns: ['硕士','本科','专科','高中'],
    },
    showPopup() {
        this.setData({ show: true });
      },
    
      onClose() {
        this.setData({ show: false });
      },
    onConfirm(event) {
        const { picker, value, index } = event.detail;
        toast(`当前值：${value}, 当前索引：${index}`);
        console.log(event.detail)
        wx.showToast({
          title: event.detail.value,
          icon:'none'
        })
      },
    
      onCancel() {
        toast('取消');
        this.setData({ show: false });
      },
});

简单的几个步骤，就完成了弹窗选择器。对你有用的话点个赞哦~

欢迎关注公众号【夜来疏影】