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

1.使用vant的popup弹出层做了一个piker的选择器,用户需要在此基础上增加筛选功能。也就是输入框

2.可是在ios机型中,input框在获取焦点以后,ios的软键盘弹起会遮盖住我们的popup层,导致体验不是很好

3.在大佬的解答及帮助下,采用窗口滚动的方式解决此方法

复制代码
<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="请选择"
            :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 = 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);
        }
      });
    }
  }
相关推荐
打不着的大喇叭36 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code42 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟44 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
杂雾无尘1 小时前
开发者必看:如何在 iOS 应用中完美实现动态自定义字体!
ios·swift·apple
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了1 小时前
Vue 3 中的组件通信与组件思想详解
vue.js