1.使用vant的popup彈出層做了一個(gè)piker的選擇器,用戶需要在此基礎(chǔ)上增加篩選功能。也就是輸入框
2.可是在ios機(jī)型中,input框在獲取焦點(diǎn)以后,ios的軟鍵盤彈起會(huì)遮蓋住我們的popup層,導(dǎo)致體驗(yàn)不是很好
3.在大佬的解答及幫助下,采用窗口滾動(dòng)的方式解決此方法文章來源：http://www.zghlxwxcb.cn/news/detail-672744.html
<Popup
v-model="personalClassificationPoup"
position="bottom"
class="per_class_scroll_view"
round
get-container="#AppMainContainer"
safe-area-inset-bottom
@closed="personalClassificationPoupClosed"
>
<Picker
class="warpPiker"
show-toolbar
title="請(qǐng)選擇"
:columns="personalClassificationColumns"
:defaultIndex="personalClassificationColumnsIndex"
value-key="TypeName"
@confirm="(value) => onPersonalPoupConfirm(value)"
@cancel="() => (personalClassificationPoup = false)"
>
<template #title>
<input
v-model="personalClassificationKey"
type="text"
@focus="getFocus"
@input="personalClassificationUpdate"
placeholder="請(qǐng)輸入搜索內(nèi)容"
class="van-field__control"
style="flex:1;text-align:center">
</template>
</Picker>
</Popup>
4.在獲取焦點(diǎn)時(shí) 將整個(gè)窗口的滾動(dòng)高度賦值為 popup層的高度文章來源地址http://www.zghlxwxcb.cn/news/detail-672744.html
getFocus(){
let events = navigator.userAgent;
// iphone手機(jī) 軟鍵盤第一次頂不起來
if(events.indexOf('iPhone')>-1){
this.$nextTick(() => {
let documents:any = document
if(documents == undefined || documents == null){
return
}
if(documents.activeElement.tagName === 'INPUT' || documents.activeElement.tagName === 'TEXTAREA'){
window.setTimeout(function () {
documents.scrollingElement.scrollTop = documents.querySelector('.per_class_scroll_view').scrollHeight;
}, 200);
}
});
}
}
到了這里，關(guān)于vue使用vant中的popup層,在popup層中加搜索功能后,input框獲取焦點(diǎn) ios機(jī)型的軟鍵盤不會(huì)將popup頂起來的問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
