vue使用vant中的popup层,在popup层中加搜索功能后,input框获取焦点 ios机型的软键盘不会将popup顶起来的问题

1.使用vant的popup弹出层做了一个piker的选择器,用户需要在此基础上增加筛选功能。也就是输入框
在这里插入图片描述
2.可是在ios机型中,input框在获取焦点以后,ios的软键盘弹起会遮盖住我们的popup层,导致体验不是很好
3.在大佬的解答及帮助下,采用窗口滚动的方式解决此方法

<Popupv-model="personalClassificationPoup"position="bottom"class="per_class_scroll_view"roundget-container="#AppMainContainer"safe-area-inset-bottom@closed="personalClassificationPoupClosed"><Pickerclass="warpPiker"show-toolbartitle="请选择":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="请输入搜索内容" class="van-field__control" style="flex:1;text-align:center"></template></Picker></Popup>

4.在获取焦点时将整个窗口的滚动高度赋值为 popup层的高度

getFocus(){let events = navigator.userAgent;// iphone手机 软键盘第一次顶不起来if(events.indexOf('iPhone')>-1){this.$nextTick(() => {let documents:any = documentif(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);}});}}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/109243.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！