JS+CSS實(shí)現(xiàn)下拉刷新/上拉加載插件

/**
 * 為指定的容器添加滾動(dòng)條,支持下拉刷新與上拉加載功能
 * @param container 需要滾動(dòng)的容器,要求設(shè)置css: position!=static,height=
 * @param option 配置項(xiàng),詳見(jiàn)下方defaultOption說(shuō)明
 * @return 返回對(duì)象用于操控此區(qū)域,當(dāng)前暴露了iscroll的refresh函數(shù),當(dāng)你在插件之外向滾動(dòng)區(qū)域增加/刪除內(nèi)容后應(yīng)該主動(dòng)調(diào)用一次
 * @description
 *
 * 2017-03-29
 * 1）支持上拉加載
 * 2017-03-30
 * 1）改為jquery靜態(tài)函數(shù)插件
 * 2）支持關(guān)閉下拉刷新或上拉加載
 */
$.installPullToRefresh =
function (container, option) {
  // 起始觸摸位置
  var touchStartY = 0;
  // 起始圖標(biāo)位置
  var pullStartY = 0;
  // 當(dāng)前的觸摸事件
  var touchEvent = null;
  // 當(dāng)前的刷新事件
  var refreshEvent = null;
  // 當(dāng)前圖標(biāo)位置
  var curY = -55;
  // 當(dāng)前的加載事件
  var loadEvent = null;
  // 默認(rèn)參數(shù)
  var defaultOption = {
    // 刷新相關(guān)
    noRefresh: false, // 關(guān)閉下拉刷新特性
    pauseBound: 40, // 觸發(fā)刷新的位置(也是圖標(biāo)loading暫停的位置)
    lowerBound: 80, // 最大下拉到多少px
    loadImg: "load.png", // loading圖片
    pullImg: "pull.png", // 下拉圖片
    onRefresh: function (refreshDone) { // 刷新數(shù)據(jù)回調(diào)
      setTimeout(function() { // 默認(rèn)不做任何事
        refreshDone();
      }, 0);
    },
    // 加載相關(guān)
    noLoad: false, // 關(guān)閉上拉加載特性
    bottomHeight: 1, // 距離滾動(dòng)條底部多少px發(fā)起刷新
    onLoad: function (loadDone) {
      setTimeout(function() {
        loadDone();
      }, 0);
    },
  };
  var finalOption = $.extend(true, defaultOption, option);
  // 創(chuàng)建iscroll5滾動(dòng)區(qū)域
  var iscroll = new IScroll(container, {
    bounce: false,
  });
  // 關(guān)閉上拉加載特性
  if (!finalOption.noLoad) {
    // 監(jiān)聽(tīng)滾動(dòng)結(jié)束事件,用于上拉加載
    iscroll.on('scrollEnd', function () {
      // 有滾動(dòng)條的情況下,才允許上拉加載
      if (iscroll.maxScrollY < 0) { // maxScrollY<0表明出現(xiàn)了滾動(dòng)條
        var bottomDistance = (iscroll.maxScrollY - iscroll.y) * -1;
        // 距離底部足夠近，觸發(fā)加載
        if (bottomDistance <= finalOption.bottomHeight) {
          // 當(dāng)前沒(méi)有刷新和加載事件正在執(zhí)行
          if (!loadEvent && !refreshEvent) {
            loadEvent = {}; // 生成新的加載事件
            finalOption.onLoad(function (error, msg) {
              loadEvent = null; // 清理當(dāng)前的加載事件
              // 延遲重繪滾動(dòng)條
              setTimeout(function () {
                iscroll.refresh();
              }, 0);
            });
          }
        }
      }
    });
  }
  // 關(guān)閉下拉刷新特性
  if (!finalOption.noRefresh) {
    // 緊鄰滾動(dòng)區(qū)域,容納刷新圖標(biāo)
    var pullContainer = $('<div class="pullContainer"></div>')
    // 創(chuàng)建小圖標(biāo)
    var pullToRefresh = $('<div class="pullToRefresh"><img src="' + finalOption.pullImg + '"></div>');
    // 保留小圖標(biāo)的快捷方式
    var pullImg = pullToRefresh.find("img");
    // 小圖標(biāo)加入到容器
    pullContainer.append(pullToRefresh);
    // 小圖標(biāo)容器添加到滾動(dòng)區(qū)域之前
    $(container).before(pullContainer);
    // 預(yù)加載loadImg
    $('<img src="' + finalOption.loadImg + '">');
    // 設(shè)置transform的函數(shù)
    function cssTransform(node, content) {
      node.css({
        '-webkit-transform' : content,
        '-moz-transform'  : content,
        '-ms-transform'   : content,
        '-o-transform'   : content,
        'transform'     : content,
      });
    }
    // 調(diào)整小圖標(biāo)位置,角度,透明度
    function goTowards(translateY, rotate, opcaticy) {
      // 更新當(dāng)前小圖標(biāo)的位置，獲取css(transform)比較麻煩,所以每次變更時(shí)自己保存
      curY = translateY;
      // 旋轉(zhuǎn)圖標(biāo)（根據(jù)抵達(dá)lowerBound的比例旋轉(zhuǎn),最大轉(zhuǎn)1圈)
      if (rotate === undefined) {
        rotate = (curY / finalOption.lowerBound) * 360;
      }
      // 透明度根據(jù)抵達(dá)pauseBound的比例計(jì)算
      if (opcaticy === undefined) {
        opcaticy = (curY / finalOption.pauseBound) * 1;
        if (opcaticy > 1) {
          opcaticy = 1;
        }
      }
      // 改變位置和旋轉(zhuǎn)角度
      cssTransform(pullToRefresh, "translateY(" + translateY + "px) translateZ(0)" + "rotateZ(" + rotate + "deg)");
      // 改變透明度
      pullToRefresh.css("opacity", opcaticy);
    }
    // 開(kāi)啟回彈動(dòng)畫(huà)
    function tryStartBackTranTop() {
      // 啟動(dòng)回彈動(dòng)畫(huà)
      pullToRefresh.addClass("backTranTop");
      // 判斷是否觸發(fā)刷新
      if (curY >= finalOption.pauseBound) {
        goTowards(finalOption.pauseBound);
        // 回彈動(dòng)畫(huà)結(jié)束發(fā)起刷新
        pullToRefresh.on('transitionend webkitTransitionEnd oTransitionEnd', function (event) {
          // 由于transitionend會(huì)對(duì)每個(gè)屬性回調(diào)一次,所以只處理其中一個(gè)
          if (event.originalEvent.propertyName == "transform") {
            // 暫停動(dòng)畫(huà)
            pullToRefresh.removeClass("backTranTop");
            pullToRefresh.unbind();
            // 透明度重置為1
            goTowards(finalOption.pauseBound, undefined, 1);
            // 切換圖片為loading圖
            pullImg.attr("src", finalOption.loadImg);
            // 因?yàn)閍namition會(huì)覆蓋transform的原因,使用top臨時(shí)定位元素
            pullToRefresh.addClass("loadingAnimation");
            pullToRefresh.css("top", finalOption.pauseBound + "px");
            // 回調(diào)刷新數(shù)據(jù),最終應(yīng)將refreshEvent傳回校驗(yàn)
            finalOption.onRefresh(function (error, msg) {
              // 用戶回調(diào)時(shí)DOM通常已經(jīng)更新, 需要通知iscroll調(diào)整（官方建議延遲執(zhí)行，涉及到瀏覽器重繪問(wèn)題）
              setTimeout(function () {
                iscroll.refresh();
              }, 0);
              // 重置角度,切換為pull圖
              goTowards(finalOption.pauseBound);
              // 取消animation,重置top
              pullToRefresh.removeClass("loadingAnimation");
              pullToRefresh.css("top", "");
              // 延遲過(guò)渡動(dòng)畫(huà)100毫秒,給瀏覽器重繪的機(jī)會(huì)
              setTimeout(function () {
                // 切換為pull圖
                pullImg.attr("src", finalOption.pullImg);
                // 恢復(fù)動(dòng)畫(huà)
                pullToRefresh.addClass("backTranTop");
                // 刷新完成
                refreshEvent = null;
                // 彈回頂部
                goTowards(-55);
              }, 100);
            });
          }
        });
      } else {
        goTowards(-55); // 彈回頂部
        refreshEvent = null; // 未達(dá)成刷新觸發(fā)條件
      }
    }
    // 父容器注冊(cè)下拉事件
    $(container).on("touchstart", function (event) {
      // 新的觸摸事件
      touchEvent = {};
      // 有一個(gè)刷新事件正在進(jìn)行
      if (refreshEvent) {
        return;
      }
      // 只有滾動(dòng)軸位置接近頂部, 才可以生成新的刷新事件
      if (iscroll.y < -1 * finalOption.lowerBound) {
        return;
      }
      // 一個(gè)新的刷新事件
      refreshEvent = touchEvent;
      touchStartY = event.originalEvent.changedTouches[0].clientY;
      pullStartY = curY;
      // 如果存在,則關(guān)閉回彈動(dòng)畫(huà)與相關(guān)監(jiān)聽(tīng)
      pullToRefresh.removeClass("backTranTop");
      pullToRefresh.unbind();
      // 切換為pull圖
      pullImg.attr("src", finalOption.pullImg);
    }).on("touchmove", function (event) {
      // 在刷新未完成前觸摸,將被忽略
      if (touchEvent != refreshEvent) {
        return;
      }
      var touchCurY = event.originalEvent.changedTouches[0].clientY;
      var touchDistance = touchCurY - touchStartY; // 本次移動(dòng)的距離
      var curPullY = pullStartY + touchDistance; // 計(jì)算圖標(biāo)應(yīng)該移動(dòng)到的位置
      // 向下不能拉出范圍
      if (curPullY > finalOption.lowerBound) {
        curPullY = finalOption.lowerBound;
      }
      // 向上不能拉出范圍
      if (curPullY <= -55) {
        curPullY = -55;
      }
      // 更新圖標(biāo)的位置
      goTowards(curPullY);
    }).on("touchend", function (event) {
      // 在刷新未完成前觸摸,將被忽略
      if (touchEvent != refreshEvent) {
        return;
      }
      // 嘗試啟動(dòng)回彈動(dòng)畫(huà)
      tryStartBackTranTop();
    });
  }
  // 初始化iscroll
  setTimeout(function() {
    iscroll.refresh();
  }, 0);
  // 返回操作此區(qū)域的工具對(duì)象
  return {
    // 用戶如果在下拉刷新之外修改了滾動(dòng)區(qū)域的內(nèi)容，需要主動(dòng)調(diào)用refresh
    refresh: function() {
      // 延遲以便配合瀏覽器重繪
      setTimeout(function() {
        iscroll.refresh();
      }, 0);
    },
    // 觸發(fā)下拉刷新
    triggerPull: function() {
      // 正在刷新或者禁止刷新
      if (refreshEvent || finalOption.noRefresh) {
        return false;
      }
      // 暫停可能正在進(jìn)行的最終階段回彈動(dòng)畫(huà)
      pullToRefresh.removeClass("backTranTop");
      // 小圖標(biāo)移動(dòng)到lowerbound位置
      goTowards(finalOption.lowerBound);
      // 創(chuàng)建新的刷新事件,占坑可以阻止在setTimeout之前的觸摸引起刷新
      refreshEvent = {};
      // 延遲到瀏覽器重繪
      setTimeout(function() {
        tryStartBackTranTop();
      }, 100);
    },
  };
};
Contact GitHub API Training Shop Blog About
© 2017 GitHub, Inc. Terms Privacy Security Status Help

.pullToRefresh {
  position:absolute;
  left:0;
  right:0;
  margin:auto;
  width: 50px;
  height: 50px;
  z-index: 10;
  opacity: 1;
  transform:translateY(-55px) translateZ(0) rotateZ(0deg);
  -ms-transform:translateY(-55px) translateZ(0) rotateZ(0deg);   /* IE 9 */
  -moz-transform:translateY(-55px) translateZ(0) rotateZ(0deg);   /* Firefox */
  -webkit-transform:translateY(-55px) translateZ(0) rotateZ(0deg); /* Safari 和 Chrome */
  -o-transform:translateY(-55px) translateZ(0) rotateZ(0deg);   /* Opera */
}
.backTranTop
{
  transition: transform 0.8s ease, opacity 0.8s ease;
  -moz-transition: transform 0.8s ease, opacity 0.8s ease; /* Firefox 4 */
  -webkit-transition: transform 0.8s ease, opacity 0.8s ease; /* Safari 和 Chrome */
  -o-transition: transform 0.8s ease, opacity 0.8s ease; /* Opera */
}
.pullContainer {
  position:relative;
}
.pullToRefresh img {
  display:block;
  width: 40px;
  height: 40px;
  /* 讓img居中在.pullToRefresh中 */
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
  margin:auto;
}
/* loading旋轉(zhuǎn)動(dòng)畫(huà) */
.loadingAnimation
{
  animation: loadingFrame 1s infinite;
  -moz-animation: loadingFrame 1s infinite;  /* Firefox */
  -webkit-animation: loadingFrame 1s infinite;  /* Safari 和 Chrome */
  -o-animation: loadingFrame 1s infinite;  /* Opera */
}
@keyframes loadingFrame
{
  from {
    transform: rotateZ(360deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}
@-moz-keyframes loadingFrame /* Firefox */
{
  from {
    transform: rotateZ(360deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}
@-webkit-keyframes loadingFrame /* Safari 和 Chrome */
{
  from {
    transform: rotateZ(360deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}
@-o-keyframes loadingFrame /* Opera */
{
  from {
    transform: rotateZ(360deg);
  }
  to {
    transform: rotateZ(0deg);
  }
}