先看下頁面代碼:文章來源：http://www.zghlxwxcb.cn/news/detail-512447.html
- 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>
- js
// pages/register/index.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
showUnit: false, //單位彈層控制
columns: ['南海人民醫(yī)院', '佛山市一', '溫州', '嘉興', '湖州'],
unit:''
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow() {
},
// 彈出選擇單位
getUnit(e) {
wx.hideKeyboard();
this.showPopup();
},
showPopup() {
this.setData({
showUnit: true
});
},
// 彈窗關(guān)閉
onCloseUnit() {
this.setData({
showUnit: false
});
},
//單位選擇確認(rèn)
onConfirm(event) {
const {
picker,
value,
index
} = event.detail;
this.setData({
unit:value
})
this.onCloseUnit();
},
//單位取消選擇器
onCancel() {
this.onCloseUnit();
console.log('value:', value)
},
})
效果:
點擊:
選完確認(rèn):
在做這個效果的時候,輸入框van-field 必須得加入readonly這個只讀屬性,不然會導(dǎo)致用戶手機觸發(fā)默認(rèn)鍵盤遮擋你的彈窗和選擇器內(nèi)容影響體驗. 也不要用disabled來禁用輸入框,樣式會變成禁用狀態(tài)下的樣式很難改動,只需要設(shè)置為只讀即可,也不會觸發(fā)手機鍵盤.文章來源地址http://www.zghlxwxcb.cn/news/detail-512447.html
到了這里，關(guān)于微信小程序使用vant組件的輸入框搭配彈層選擇器注意事項的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
