基于iscroll5的上拉加载,下拉刷新

2019-10-15 本文已影响0人无疆wj

// demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>scroll-loading</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    li {
      list-style: none;
      height: 80px;
    }

    li:nth-of-type(2n) {
      background-color: green;
    }

    li:nth-of-type(2n+1) {
      background-color: greenyellow;
    }

    #wrapper {
      height: 400px;
      overflow: hidden;
      position: relative;
    }

    #wrapper .pull-up-msg {
      height: 30px;
      text-align: center;
    }

    #wrapper .pull-down-msg {
      height: 30px;
      text-align: center;
      display: none;
    }
  </style>
</head>

<body onload="loaded()">
  <div id="wrapper">
    <div class="scroll">
      <div class="pull-down-msg"></div>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
      </ul>
      <div class="pull-up-msg"></div>
    </div>
  </div>
  <script src="./iscroll-master/build/iscroll-probe.js"></script>
  <script src="./jQuery-v2.0.0.js"></script>
  <script src="./scrollLoading.js"></script>

  <script>

    function loaded() {

      var myScrollLoading = new ScrollLoading({
        pullUpEl: '#wrapper .pull-up-msg',
        pullDownEl: '#wrapper .pull-down-msg',
        pullUpFun: loadFun,
        pullDownFun: refreshFun,
        IScrollOptions: {}
      });

      // 注册上拉加载失败的点击事件
      document.querySelector('.pull-up-msg').onclick = function () {
        if (myScrollLoading.loading == 'loadFail') {
          myScrollLoading.changeLoading('loading');
          loadFun()
        }
      }

      // 下拉刷新
      function refreshFun() {
        setTimeout(() => {
          let newEl = `
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
            <li>55</li>
            <li>66</li>
            <li>77</li>
            <li>88</li>
            <li>99</li>
            <li>100</li>
            `
          $('#wrapper ul').html(newEl);
          myScrollLoading.changeRefreshStatus('refreshOver');
        }, 2000);

      };

      // 上拉加载
      function loadFun() {
        setTimeout(() => {

          // 模拟加载失败
          if (Math.random() > 0.8) {
            myScrollLoading.changeLoading('loadFail');
            return
          }

          let newEl = `
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            `
          $('#wrapper ul').append(newEl);

          if ($('#wrapper li').length > 50) {
            // 加载结束,不可再加载
            myScrollLoading.changeLoading('loadOver');
          } else {
            // 本次加载完成,可再加载
            myScrollLoading.changeLoading('loadable');
          }
        }, 2000);

      }
    }
  </script>
</body>

</html>

// scrollLoading.js
class ScrollLoading {
  constructor({
    IScrollEl,
    pullUpEl,
    pullDownEl,
    pullUpFun,
    pullDownFun,
    IScrollOptions
  }) {
    this.options = IScrollOptions || {};
    this.options.probeType = 2;
    this.options.mouseWheel = true;

    this.IScrollEl = document.querySelector(IScrollEl);
    this.pullUpEl = document.querySelector(pullUpEl);
    this.pullDownEl = document.querySelector(pullDownEl);

    this.permitPullDown = Boolean(pullDownEl);

    this.changeLoading('loadable');

    this.info(IScrollEl, pullUpFun, pullDownFun);
  }

  info(IScrollEl, loadMoreFun, refreshFun) {
    let _this = this;
    this.myScroll = new IScroll(IScrollEl, this.options);

    // 滚动事件
    this.myScroll.on('scroll', function () {

      if (_this.permitPullDown) {
        // 下拉
        if (_this.myScroll.y > 10) {
          _this.pullDownEl.style.display = 'block';
        };

        if (_this.myScroll.y > 40) {
          _this.changeRefreshStatus('refreshRelease');
        } else if (_this.myScroll.y > 0 && _this.myScroll.y < 50) {
          _this.changeRefreshStatus('refreshAble');
        }
      }
    });

    // 滚动结束事件
    this.myScroll.on('scrollEnd', function () {

      // 上拉加载
      let distance = _this.myScroll.y - _this.myScroll.maxScrollY;
      // 距离底部20px,即认为触底
      if (distance < 20 && _this.loading == 'loadable') {
        _this.changeLoading('loading');
        loadMoreFun && loadMoreFun();
      }

      // 下拉刷新
      if (_this.permitPullDown) {
        if (_this.refresh == 'refreshRelease') {
          _this.changeRefreshStatus('refreshing');
          refreshFun && refreshFun();
        } else {
          _this.pullDownEl.style.display = 'none';
        }
      }

    });
  }

  // 首页加载scroll高度不够执行
  reset() {
    let boxHeight = this.IScrollEl.offsetHeight;
    let scrollHeight = this.IScrollEl.children[0].offsetHeight;
    if (boxHeight > scrollHeight) {
      this.IScrollEl.children[0].style.height = boxHeight + 1 + 'px';
      this.myScroll.refresh();
    }
  }

  changeLoading(status) {
    let loadingObj = {
      loadable: '上拉加载',
      loading: '加载中...',
      loadFail: '加载失败,点击重试',
      loadOver: '加载完成'
    };
    this.loading = status;

    this.pullUpEl.innerText = loadingObj[status];
    setTimeout(() => {
      this.myScroll.refresh();
    }, 0);
  }

  changeRefreshStatus(status) {
    let refreshObj = {
      refreshAble: '下拉刷新',
      refreshRelease: '释放刷新',
      refreshing: '刷新中',
      refreshOver: '刷新完成'
    }
    this.refresh = status;

    this.pullDownEl.innerText = refreshObj[status];

    if (status == 'refreshOver') {
      setTimeout(() => {
        this.pullDownEl.style.display = 'none';
        this.myScroll.refresh();
      }, 100);
    }
  }
}

基于iscroll5的上拉加载,下拉刷新

猜你喜欢

热点阅读