vue h5頁面中輸入框軟鍵盤頂起頁面導致vant組件不能正常使用的解決方案ios

可能出現的問題:
1、input輸入框關閉軟鍵盤後,頁面沒有往下彈出來
3、使用vant的dialog或者popup等組件時,因爲ios端h5頁面距離改變了的原因,導致點擊按鈕無效

app.vue的created()週期中加入如下代碼, 失焦後將頁面回到頂部

	// ios頁面輸入框失焦要頁面重置到頂部
    if (this.$isIos()) { // 判斷是否是ios端
      let flag = false
      let pageBackNormFunc
      document.body.addEventListener('focusin', () => {
        // 軟鍵盤彈起事件
        flag = true
        pageBackNormFunc && clearTimeout(pageBackNormFunc)
      })
      document.body.addEventListener('focusout', () => {
        // 軟鍵盤關閉事件
        if (flag) {
          pageBackNormFunc = setTimeout(function () { // // 當鍵盤收起的時候讓頁面回到原始位置
            window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) 
          }, 200)
        }
        flag = false
      })
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章