• 移动端常见问题汇总


    1ios键盘弹出隐藏后存在留白

    // input失去焦点时加入如下代码

      if (/iPhone|iPod|ios|iPad/i.test(navigator.userAgent)) {
          setTimeout(() => {
               document.activeElement.scrollIntoViewIfNeeded(true)
               this.openTouch()    
          },10)
     }
    或者
    if (detectOS().ios)  window.scroll(0,0)
    https://blog.csdn.net/weixin_45152159/article/details/97247488
    https://www.jianshu.com/p/4ad7108b5705
    2ios input获取焦点时不出现光标
    input {
        user-select: auto;
    }
    3IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题
     changeText () {
         // IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题
        if(this.value !== $(`#${this.eleId}`).val()){
            this.value = $(`#${this.eleId}`).val();
         }
    }
    4IOS滚动穿透问题
    // 锁定body滚动条--主要解决用户弹框滚动时的穿透
    Vue.prototype.closeTouch = function () {
      document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive: false}) // 阻止默认事件
    }
    Vue.prototype.openTouch = function () {
      document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive: false}) // 打开默认事件
    }
    handler: (e) => {
        e.preventDefault()
    }

    打开picker等弹框的时候,调用this.closeTouch(),锁定滚动,阻止默认事件,关闭弹框的时候调用this.openTouch()打开默认事件
    参考:https://segmentfault.com/a/1190000022560927
    5andriod 端滚动当前元素到屏幕最顶端
    一个元素的 scrollTop 值是这个元素的内容顶部(卷起来的)到它的视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0
    Element 接口的scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。
       const element = document.getElementById('hidden-field');
                    _this.blankHeight = element.getBoundingClientRect().top + 'px'
                    _this.showBlank = true
                    if (element) {
                        const timerout = setTimeout(()=> {
                            element.scrollIntoView({
                                behavior: "smooth",
                                block:    "start",
                                // 修复安卓手机当点击位置在屏幕右侧的输入框,屏幕就会左移
                                inline: "end"
                            })
                            clearTimeout(timerout)
                        }, 0)
                    }
    6ios 端滚动当前元素到屏幕最顶端
          const ele = document.getElementById('hidden-field');
                    _this.blankHeight = ele.getBoundingClientRect().top + 'px'
                    _this.showBlank = true
                    setTimeout(() => {
                        const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
                        // 下移页面
                        window.scroll({
                            left: 0,
                            top: ~scrollHeight,
                            behavior: "smooth"
                        })
                        // 滚动单元格到视口
                        setTimeout(() => {
                            const element = $('#wrapper');
                            const input = document.getElementById('hidden-field');
                            const crossword = document.getElementById('crossword');
                            element.scrollTop(input.getBoundingClientRect().top - crossword.getBoundingClientRect().top)
                        },100)
                    }, 100)
    7新ipad ua不带有ipad字段导致的ipad检测失败
    export const detectOS = () => {
        const ua = navigator.userAgent
        const iphone = /(iPhonesOS)s([d_]+)/.test(ua) && !window.MSStream
        const ipad = /(iPad|Macintosh).*OSs([d_]+)/.test(ua) && !iphone && !window.MSStream && 'ontouchend' in document
        const android = navigator && navigator.userAgent && navigator.userAgent.toUpperCase().indexOf('ANDROID') > -1
        const ios = iphone || ipad
        return { ios, android }
    }
    8安卓端做成类似ios的body滚动效果
     
    
    
     
  • 相关阅读:
    2月8日
    2月7日
    2月6日
    2月5日
    事务
    synchronized关键字详解(二)
    synchronized关键字详解(一)
    java.sql.SQLException: Access denied for user 'somebody'@'localhost' (using password: YES)
    wex5 教程 之 图文讲解 wex5集成HTML5 视频播放器
    wex5 实战 加密与解密系列(1) DES算法引入与调用
  • 原文地址:https://www.cnblogs.com/1994missyou/p/14164966.html
Copyright © 2020-2023  润新知