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