基于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 日 11 : 29 PM
如果觉得我的文章对你有用,请随意赞赏!