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

最新推荐文章于 2021-06-04 18:46:07 发布

原创最新推荐文章于 2021-06-04 18:46:07 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#下拉刷新 #安卓微信

JS 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种在安卓微信浏览器中实现下拉刷新功能的方法，通过判断浏览器类型和设备，调整触摸事件处理逻辑，确保在不同环境下都能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安卓微信浏览器下拉会露出域名等信息，这样就会影响下拉刷新，如果阻止微信浏览器下拉，那正常的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);
                }
            });
        }