zoukankan      html  css  js  c++  java
  • IOS上微信在输入框弹出键盘后,页面不恢复,下方有留白,有弹窗弹出时页面内容感应区域错位

    问题说明:

    ios中,键盘的弹起,页面会往上挪动,使输入框展示在页面中间,键盘隐藏页面会下挪恢复原状。

    在微信移动端,ios页面不恢复,下方有留白。

    收起键盘的瞬间,如果有弹窗弹出,此时时页面内容应区域错位。

    问题栗子配图:

    解决方案:

    其实只要知道了原因,坑填起来很简单:输入法的软键盘影响了页面的高度和位置。

    我们重置页面位置起始位置为0重置页面高度为初始高度

    核心代码:

    window.scroll(0, 0);
    window.innerHeight = window.outerHeight = “页面之前高度”

    全部代码:

    <script>
    data () {
        return {
          screenHeight: '';
        }
    },
    updated () {
        let that = this;
        this.$nextTick(function () {
            let $inputs = Array.from(document.getElementsByTagName('input'));
            /*let body = document.body;
            $inputs.forEach(item => { // 定时器是处理多个input间快速切换闪屏问题,可省略
                item.onblur = function () { // onblur是核心方法
                    clearTimeout(body.timer);
                    body.timer = setTimeout(() => {
                    window.scroll(0, 0);
                    window.innerHeight = window.outerHeight = that.screenHeight
                    }, 150)
                }
                item.onfocus = function () {
                    clearTimeout(body.timer)
                }
            })*/
           let body = document.body;
           $inputs.forEach(item => {
               item.onblur = function () { // onblur是核心方法
                    window.scroll(0, 0);
                    window.innerHeight = window.outerHeight = that.screenHeight
               }
           })
        })
    },
    mounted () {
        this.screenHeight = document.documentElement.clientHeight
    }
    </script>
    View Code

     tips:因为只有微信端ios有问题,这个是判断是否为微信浏览器的一段代码

    window.onload = function() {
        isWeixinBrowser();
    }
    //判断是否微信浏览器
    function isWeixinBrowser() {  
        var ua = navigator.userAgent.toLowerCase();  
        var result = (/micromessenger/.test(ua)) ? true : false;
        if (result) {
            console.log('你正在访问微信浏览器');
        }
        else {
            console.log('你访问的不是微信浏览器');
        }
        return result;
    }
  • 相关阅读:
    Myeclipse 10.7 android(安卓) 开发环境搭建
    matplotlib
    tophat cufflinks cuffcompare cuffmerge 的使用
    shell 随机从文件中抽取若干行
    liftover的使用/用法
    命令行运行R语言脚本(代码)
    R: NULL, NA, and NaN
    SOME USEFUL MACHINE LEARNING LIBRARIES.
    Flutter实战:手把手教你写Flutter Plugin
    Flutter学习笔记(五)
  • 原文地址:https://www.cnblogs.com/ziChin/p/10278016.html
Copyright © 2011-2022 走看看