微信小程序使用vant组件的输入框搭配弹层选择器注意事项

先看下页面代码:

• wxml

<view>
    <van-cell-group >
      <van-field readonly is-link value="{{ unit }}"  catchtap="getUnit" center clearable placeholder="请选择单位" label="单位" required="true">
      van-field>
    van-cell-group>
      
	  <van-popup show="{{ showUnit }}" bind:close="onCloseUnit" position="bottom">
	    <van-picker loading="{{false}}"  show-toolbar title="单位" columns="{{ columns }}" bind:cancel="onCancel" bind:confirm="onConfirm" />
	  van-popup>
view>
1
2
3
4
5
6
7
8
9
10

• js

// pages/register/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    showUnit: false, //单位弹层控制
    columns: ['南海人民医院', '佛山市一', '温州', '嘉兴', '湖州'],
    unit:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },
  // 弹出选择单位
  getUnit(e) {
    wx.hideKeyboard();
    this.showPopup();
  },
  showPopup() {
    this.setData({
      showUnit: true
    });
  },
  // 弹窗关闭
  onCloseUnit() {
    this.setData({
      showUnit: false
    });
  },
  //单位选择确认
  onConfirm(event) {
    const {
      picker,
      value,
      index
    } = event.detail;
    this.setData({
      unit:value
    })
    this.onCloseUnit();

  },
  //单位取消选择器
  onCancel() {
    this.onCloseUnit();
    console.log('value:', value)
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

效果:

点击:

选完确认:

在做这个效果的时候,输入框van-field 必须得加入readonly这个只读属性,不然会导致用户手机触发默认键盘遮挡你的弹窗和选择器内容影响体验. 也不要用disabled来禁用输入框,样式会变成禁用状态下的样式很难改动,只需要设置为只读即可,也不会触发手机键盘.