基于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
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏！