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

功能概述

1. 使用MPX框架开发微信小程序时，无法使用原生的Picker选择器，经试验，可以采用Vant Weapp的UI实现。

实现步骤

在MPX项目中引入Vant Weapp

1. 通过 npm 安装
   npm i @vant/weapp -S
2. 在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
},

参数说明：

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

效果

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

代码

<van-popup
  show="{{ showPopup }}"
  position="bottom"
  custom-style="height: 40%;"
  bind:close="onPopupClose"
>
  <!-- 没有共用同一个picker组件的原因是，默认选中项无法绑定，每次打开都是默认选中首个选项，而通过wx:if分别渲染多个不同的picker则可以实现 -->
  <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>

参数说明：

1. 没有共用同一个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
  }
},

效果