微信的下拉回弹和安卓键盘弹出遮挡输入框的处理

      发布在：Notes, 前端技术      评论：0 条评论

微信iOS客户端在2017年3月1日前逐步升级为WKWebview内核，替换之前的UIWebview，两者差距就目前来说兼容性问题不大，但是不管哪个内核都有个让人头疼的地方，就是浏览器下拉回弹
下面这段代码可以帮助在微信中禁用下拉回弹并且不影响类似swiper的滑动插件

function stopDrop() {
                    var lastY;//最后一次y坐标点
                    $(document.body).on('touchstart', function(event) {
                        lastY = event.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后一次Y度坐标。
                    });
                    $(document.body).on('touchmove', function(event) {
                        var y = event.originalEvent.changedTouches[0].clientY;
                        var st = $(this).scrollTop(); //滚动条高度
                        if (y >= lastY && st <= 10) {//如果滚动条高度小于0，可以理解为到顶了，且是下拉情况下，阻止touchmove事件。
                            astY = y;
                            event.preventDefault();
                        }
                        lastY = y;
                    });
                }
                stopDrop();

最好在dom渲染完成之后再执行哦~
对于安卓微信浏览器来说，有一个比较痛的地方就是调出键盘会遮挡输入框，不会像ios那样整个页面往上移，那么久用$(window).resize来写一个能够让他上移的方法就好了

var winHeight = $(window).height(); //获取当前页面高度
$(window).resize(function() {
    var thisHeight = $(this).height();
    if (winHeight - thisHeight > 50) {
        $('body').css('height', winHeight + 'px');
    } else {
        $('body').css('height', '100%');
    }
});

1月8日补充
今天发现一个麻烦的问题，ios上的a标签，还有我的swiper在点击的时候背景颜色特别奇怪，尝试写

a,a:focus,a:active,a:hover,a:visited{
    -background-color:rgba(0,0,0,0)
    }

无果，然后想到这是在ios和chrome才会有的，查了下手册，找到了如下属性：

*,*:focus,*:active,*:hover,*:visited{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

这样就彻底解决了

本文由 Hansuku 创作，除注明转载/出处外，均为本站原创，转载前请务必署名
最后编辑时间为: 2018-01-08 17:48 Monday

← → ↓ ↑
Responses