基于iScroll实现下拉刷新和上拉加载

  • index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>实现下拉刷新和上拉加载</title>
        <link rel="stylesheet" href="index.css">
        <script>
            // window.devicePixelRatio获取当前的设备像素
            let scale = 1.0 / window.devicePixelRatio;
            let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
            document.write(text);
    
            document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
        </script>
    </head>
    <body>
    <div class="content">
        <div class="content-in">
            <!--下拉刷新 Start-->
            <div class="pull-down">
                <img src="pull-down.png" alt="">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="60px" height="60px" viewBox="279.747 366.016 60 60"
                     enable-background="new 279.747 366.016 60 60" xml:space="preserve">
            <path id="refreshLogo" fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round"
                  stroke-miterlimit="10" d="M301.144,374.58
                c-16.549,5.334-25.163,23.41-15.075,37.437c8.615,12.051,26.864,15.606,40.692,8.001c10.995-6.025,14.282-18.768,7.368-28.349
                c-5.555-7.705-17.229-9.977-26.07-5.137c-7.027,3.853-8.614,10.767-5.44,16.298c3.06,5.137,11.221,5.631,15.302,2.667
                c5.44-4.05,4.193-10.568,1.474-15.31c-14.282-25.09,7.254-24.694,9.975-18.966"/>
            </svg>
            </div>
            <!--下拉刷新 End-->
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <p>我是p</p>
            <!--上拉加载 Start-->
            <div class="pull-up">
                <p>
                    <img src="pull-up.gif">
                    <span>上拉加载更多</span>
                </p>
            </div>
            <!--上拉加载 End-->
        </div>
    </div>
    <script src="zepto.js"></script>
    <script src="event.js"></script>
    <script src="iscroll-probe.js"></script>
    <script src="index.js"></script>
    </body>
    </html>

  • index.css:

    子元素内容高度必须大于父元素高度才能有滚动效果

    * {
        padding: 0;
        margin: 0;
        touch-action: none;
    }
    
    html, body {
        width: 100%;
        height: 100%;
        font-size: 0.4rem;
    }
    
    .content {
        margin: 20px auto;
        width: 5rem;
        height: 10rem;
        border: 1px solid #000000;
        overflow: hidden;
    }
    
    .pull-down {
        width: 100%;
        height: 0.6rem;
        position: relative;
    }
    
    .pull-down img, svg {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }
    
    .pull-up {
        width: 100%;
        height: 0.98rem;
    }
    
    .pull-up p {
        padding-top: 0.29rem;
        text-align: center;
        box-sizing: border-box;
        font-size: 0.24rem;
    }

  • index.js:

    $(function () {
        /*公共头部处理*/
        $(".header-center-box>input").focus(function () {
            $(".header").addClass("active");
        });
        $(".header-cancle").click(function () {
            $(".header").removeClass("active");
        });
        $(".header-switch>span").click(function () {
            $(".header-switch>i").animate({left: this.offsetLeft}, 30);
            $(this).addClass("active").siblings().removeClass("active");
        });
    
        /*公共底部处理*/
        let pageArray = ["home", "video", "me", "friend", "account"];
        $(".footer>ul>li").click(function () {
            // 切换底部图标
            $(this).addClass("active").siblings().removeClass("active");
            let url = $(this).find("img").attr("src");
            url = url.replace("normal", "selected");
            $(this).find("img").attr("src", url);
            $(this).siblings().find("img").forEach(function (oImg) {
                oImg.src = oImg.src.replace("selected", "normal");
            });
    
            // 切换头部样式
            let current = pageArray[$(this).index()];
            $(".header").removeClass().addClass("header " + current);
        });
    
        /*公共内容处理*/
        // 1.获取SVG路径的长度
        let length = $("#refreshLogo").get(0).getTotalLength();
        // 2.默认先隐藏路径
        $("#refreshLogo").css({"stroke-dasharray": length});
        $("#refreshLogo").css({"stroke-dashoffset": length});
        // 3.创建IScroll对象
        let myScroll = new IScroll('.content', {
            mouseWheel: false,// 不侦听鼠标滚轮事件
            scrollbars: false,// 不需要滚动条
            /*
            使用scroll事件需要配置probeType
            1  滚动不繁忙的时候触发
            2  滚动时每隔一定时间触发
            3  每滚动一像素触发一次
            */
            probeType: 3,
        });
        // 获取下拉图片高度
        let logoHeight = $(".pull-down").height();
        // 标记是否需要刷新
        let isPullDown = false;
        // 处理重复刷新数据,判断是是否正在刷新中,刷新中,则禁止反复刷新
        let isRefresh = false;
        // 获取上拉图片高度
        let bottomHeight = $(".pull-up").height();
        // 最大回弹位置
        let maxOffsetY = myScroll.maxScrollY - bottomHeight;
        // 标记是否需要加载
        let isPullUp = false;
        // scroll事件只有在scroll-probe.js版本中有效
        myScroll.on('scroll', function () {
            if (this.y - logoHeight >= 0) {
                /*下拉刷新和上拉加载*/
                // this.y:滚动高度,*3能提高绘制路径的时间
                if (((this.y - logoHeight) * 3) <= length) {
                    // 绘制路径
                    $("#refreshLogo").css({"stroke-dashoffset": length - (this.y - logoHeight) * 3});
                } else {
                    // console.log(this.y);
                    // svg画完后固定的位置,应与this.y相等
                    this.minScrollY = 170;
                    isPullDown = true;
                }
            } else if (this.y <= maxOffsetY) {
                /*上拉加载*/
                this.maxScrollY = maxOffsetY;
                isPullUp = true;
                $(".pull-up>p>span").html("松手加载更多");
            }
        });
        // scrollEnd表示停止滚动
        myScroll.on('scrollEnd', function () {
            if (isPullDown && !isRefresh) {
                isRefresh = true;
                // 去网络加载数据
                refreshDown();
            } else if (isPullUp && !isRefresh) {
                isRefresh = true;
                $(".pull-up>p>span").html("加载中...");
                // 去网络加载数据
                refreshUp();
            }
        });
    
        // 模拟刷新网络
        function refreshDown() {
            setTimeout(function () {
                isPullDown = false;
                isRefresh = false;
                myScroll.minScrollY = 0;
                // iScroll回弹到初始位置
                myScroll.scrollTo(0, 0);
                // SVG回弹到初始位置
                $("#refreshLogo").css({"stroke-dashoffset": length});
            }, 100);
        }
    
        // 模拟加载网络
        function refreshUp() {
            setTimeout(function () {
                isPullUp = false;
                isRefresh = false;
                myScroll.maxScrollY = maxOffsetY + bottomHeight;
                myScroll.scrollTo(0, myScroll.maxScrollY);
                $(".pull-up>p>span").html("上拉加载更多");
            }, 2000);
        }
    })

最后修改:2021 年 03 月 15 日
如果觉得我的文章对你有用,请随意赞赏!