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

最新推荐文章于 2024-09-09 14:20:55 发布

半开半落

最新推荐文章于 2024-09-09 14:20:55 发布

阅读量3.5k

点赞数 1

分类专栏：微信小程序前端文章标签：微信小程序 javascript 小程序

本文链接：https://blog.csdn.net/weixin_44418100/article/details/126057591

版权

前端同时被 2 个专栏收录

35 篇文章 2 订阅

订阅专栏

微信小程序

8 篇文章 1 订阅

订阅专栏

本文介绍了在微信小程序中使用van-field和van-popup组件创建单位选择器的过程，强调了设置van-field为readonly属性而非disabled以避免键盘遮挡弹窗并保持样式正常。同时，详细展示了相关代码实现，包括onConfirm、onCancel等事件处理函数，确保用户能够顺利选择和确认单位。

摘要由CSDN通过智能技术生成

先看下页面代码:

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

效果:
在这里插入图片描述
点击:

选完确认:

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