jq下拉刷新（安卓微信浏览器实现刷新）

太过爱你忘了你带给我的痛 2022-04-02 18:44 303阅读 0赞

安卓微信浏览器下拉会露出域名等信息，这样就会影响下拉刷新，如果[阻止微信浏览器下拉][Link 1]，那正常的move也会失效，然后想了一个方法，如果是安卓微信浏览器，则换种操作方法：当scrollTop为0时，先上划一点再迅速下拉就可以实现刷新，代码如下

var startY,
                mY,
                topScroll,
                refreshFlag = false,//下拉刷新标志
                moveY = 0,//滑动的值
                isIos,//是否为苹果手机
                isWeixin; //是否为微信浏览器
            var ua = window.navigator.userAgent.toLowerCase();
            isWeixin = ua.match(/MicroMessenger/i) == 'micromessenger';
            isIos = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    
            function bindEvents() {
                $('.box').on('touchstart', '.box-item', function (e) {
                    //有关下拉刷新
                    startY = e.originalEvent.targetTouches[0].pageY;
                    topScroll = $(document).scrollTop() || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                    }, 500);
                });
                $('.box').on('touchmove', '.box-item', function (e) {
                    mY = e.originalEvent.targetTouches[0].pageY;
                    if (topScroll === 0 && (isWeixin === false || (isWeixin === true && isIos === true))) {
                        moveY += 2;
                        if (mY - startY > 0) {
                            refreshFlag = true;
                            $('.navbar').fadeOut();
                            $('.dropdownRefresh').fadeIn();
                            $('.dropdownRefresh').text('下拉刷新');
                            $('.box').css({
                                top: moveY + 55 + 'px'
                            });
                            $('.dropdownRefresh').css({
                                height: moveY + 55 + 'px',
                                'line-height': moveY + 55 + 'px'
                            });
                            if ((moveY + 55) >= 80) {
                                $('.dropdownRefresh').text('释放刷新');
                            }
                        }
                     //如果是安卓微信浏览器
                    } else if (topScroll === 0 && isWeixin === true && isIos === false) {
                        if (mY - startY > 0) {
                            refreshFlag = true;
                        }
                    }
                });
                $('.box').on('touchend', '.box-item', function (e) {
                    //下拉刷新结束
                    if (refreshFlag && (isWeixin === false || (isWeixin === true && isIos === true))) {
                        $('.box').animate({ top: 55 });
                        $('.dropdownRefresh').animate({ height: 55, lineHeight: 55 });
                        if (moveY >= 25) {
                            $('.dropdownRefresh').text('正在刷新');
                            //发送请求
                            ajaxFlag = true;
                            pageNum = 1;
                            ajaxFun(pageNum, conNum, sDate, eDate, productClassify, productName, conNr, state, listJion);
                        } else {
                            $('.navbar').fadeIn();
                            $('.dropdownRefresh').fadeOut();
                        }
                        moveY = 0;
                     //如果是安卓微信浏览器
                    } else if (refreshFlag && isWeixin === true && isIos === false) {
                        $('.load').css({
                            'display': 'block',
                            'position': 'fixed'
                        });
                        //发送请求
                        ajaxFlag = true;
                        pageNum = 1;
                        ajaxFun(pageNum, conNum, sDate, eDate, productClassify, productName, conNr, state, listJion);
                    }
                });
            }

[Link 1]: https://segmentfault.com/a/1190000008512184