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

这篇具有很好参考价值的文章主要介绍了微信小程序使用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>

// 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)
  },
})

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

选完确认:

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