js原生實現(xiàn)切換分頁，并預(yù)加載上下分頁(H5).md

閑著無聊，開發(fā)個分頁切換腳本，如有問題，請在評論下指出

  • 頁面HTML代碼
<div id="swiper_container">
    <div class="swiper_subject"></div>
</div>
  • 參數(shù)說明

curPage 當(dāng)前頁碼，不傳默認(rèn)為 1
height 容器swipter_container 的高度，不傳默認(rèn)取body高度，單位 px
width 容器swipter_container 的寬度，不傳默認(rèn)取body寬度， 單位 px
el 父容器的class/id，請保證唯一值
wrapper 子容器的class
direction 切換方向，默認(rèn)豎直方向切換 豎-vertical 橫-parallel
time Number值 頁面切換動畫效果時長 單位 秒 默認(rèn) 1S
minDistance 設(shè)置手指移動多長距離后開始開始判斷是否移動容器 默認(rèn) 20
maxDistance 設(shè)置手指移動多長距離后開始開始判斷是否切換頁面 默認(rèn) 40
successFun 獲取數(shù)據(jù)成功后需要執(zhí)行的方法，需傳參 className/totalPage
failFun 獲取數(shù)據(jù)失敗后需要執(zhí)行的方法，需傳參 className
getData 傳入獲取數(shù)據(jù)的方法，在初始化后，默認(rèn)必調(diào)取一次getData方法，并傳出四個參數(shù)，className-數(shù)據(jù)存放的分頁容器class，page-該分頁的頁碼，successFun-獲取數(shù)據(jù)成功后需要執(zhí)行的方法，需傳參 className/totalPage，failFun-獲取數(shù)據(jù)失敗后需要執(zhí)行的方法，需傳參 className

  • js調(diào)用
var swiper = new PageSwiper({
    "curPage" : pageGlobal.curPageFund,
    "height": "350px",
    "el" : "#swiper_container",
    "wrapper" : ".swiper_subject",
    "getData" : function(className, page, successFun, failFun) {
            // 初始化數(shù)據(jù)
                        // getDataAjax 為獲取數(shù)據(jù)的方法
            getDataAjax(className, page, successFun, failFun)
    }
});
  • 代碼
/**
   * 該方法豎直方向切換有個小BUG，容器高度不能出現(xiàn)滾動條，否則會沖突，后期改善
   * curPage 當(dāng)前頁碼
   * el 目標(biāo)元素
   * direction 切換方向，默認(rèn)橫方向切換 豎-vertical 橫-parallel
   * time Number 頁面切換效果時長 單位 秒 默認(rèn) 1S
   * wrapper 子容器的元素
   * height 容器高度 單位 px
   * width 容器寬度 單位 px
   * minDistance 設(shè)置手指移動多長距離后開始開始判斷是否移動容器 默認(rèn) 20
   * maxDistance  設(shè)置手指移動多長距離后開始開始判斷是否切換頁面 默認(rèn) 40
   * successFun 獲取數(shù)據(jù)成功后需要執(zhí)行的方法，需傳參 className/totalPage
   * failFun 獲取數(shù)據(jù)失敗后需要執(zhí)行的方法，需傳參 className
   */
function PageSwiper(options) {
      var _this = this;
      this.direction = options.direction || "parallel";
      this.curPage = options.curPage || 1;
      this.totalPage = options.totalPage || 1;
      this.startPageX = 0;
      this.endPageX = 0;
      this.startPageY = 0;
      this.endPageY = 0;
      this.moveDistanceX = 0; // 手指橫向移動距離
      this.moveDistanceY = 0; // 手指豎向移動距離
      this.minDistance = 20; // 設(shè)置手指移動多長距離后開始開始判斷是否移動容器
      this.maxDistance = 80; // 設(shè)置手指移動多長距離后開始開始判斷是否切換頁面
      this.time = options.time || 1;
      this.loadPreFinish= true; // 判斷加載是否完成
      this.loadNextFinish= true;
      this.width;
      this.height;
      this.currentPageMoveDistance = 0;
      this.refresh = false;
      this.getData = (function() {
          if(options.getData) {
              return options.getData;
          }
          alert("getData不能為空！");
          return;
      })();
      this.el = (function() {
          var el = options.el ? options.el : "#swiper_container";
          var elem = document.querySelector(el);
          if(elem) {
              _this.elClassName = options.el + " ";
              return elem;
          }
          alert("el不能為空！");
          return;
      })();
      this.wrapper = (function() {
          var wrapper = options.wrapper ? options.wrapper : ".current_swiper_subject";
          var elem = document.querySelector(wrapper);
          if(elem) {
              return elem;
          }
          alert("wrapper不能為空！");
          return;
      })();
      this.getStartTouchGrid = function(event) {
          event.preventDefault();
          event.stopPropagation();
          var touch = event.touches[0];
          _this.startPageX = touch.pageX;
          _this.startPageY = touch.pageY;
          _this.endPageX = touch.pageX;
          _this.endPageY = touch.pageY;
      };

      this.getTouchMoveGrid = function() {
          event.preventDefault();
          event.stopPropagation();
          var touch = event.touches[0];
          _this.moveDistanceX = touch.pageX - _this.endPageX;
          _this.moveDistanceY = touch.pageY - _this.endPageY;
          _this.endPageX = touch.pageX;
          _this.endPageY = touch.pageY;

          if(_this.direction === "vertical") {
              if(_this.moveDistanceY > 0) {
                  // 向下方向移動
                  if(_this.curPage === 1) return;
                  // 先判斷是否已加載完成
                  var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
                  var isMoveDistanceY = Number(transform.substring(7).split(",")[5].replace(")", ""));
                  if(Math.abs(isMoveDistanceY) <= 0 && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
                  // 判斷數(shù)據(jù)是否加載成功，成功請在當(dāng)前子容器上添加class true
                  var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
                  var children = _this.el.children;
                  var cur_curPage_index = [].indexOf.call(children, cur_curPage);
                  if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index + 1 == children.length && _this.wrapper.getAttribute("getData")== "false")) {
                      if(Math.abs(_this.endPageY - _this.startPageY) >= _this.minDistance && Math.abs(_this.endPageY - _this.startPageY) <= Number(_this.height.replace("px", ""))) {
                          // 開始移動容器
                          var hasMoveDistanceY = isMoveDistanceY + _this.moveDistanceY;
                          _this.el.style.transform = "translate3d(0, "+hasMoveDistanceY+"px, 0)";
                      }
                  }
              } else {
                  // 向上方向移動
                  if(_this.curPage === _this.totalPage) return;
                  // 先判斷是否已加載完成
                  console.log(_this.el, 5555)
                  var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
                  var isMoveDistanceY = Number(transform.substring(7).split(",")[5].replace(")", ""));
                  if(Math.abs(isMoveDistanceY) >= (_this.el.children.length - 1) * Number(_this.height.replace("px", "")) && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
                  var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
                  var children = _this.el.children;
                  var cur_curPage_index = [].indexOf.call(children, cur_curPage);
                  if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index === 0 && _this.wrapper.getAttribute("getData")== "false")) {
                      if(Math.abs(_this.endPageY - _this.startPageY) >= _this.minDistance && Math.abs(_this.endPageY - _this.startPageY) <= Number(_this.height.replace("px", ""))) {
                          // 開始移動容器
                          var hasMoveDistanceY = isMoveDistanceY + _this.moveDistanceY;
                          _this.el.style.transform = "translate3d(0, "+hasMoveDistanceY+"px, 0)";
                      }
                  }
              }
          } else {
              if(_this.moveDistanceX > 0) {
                  // 向右方向移動
                  if(_this.curPage === 1) return;
                  // 先判斷是否已加載完成
                  var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
                  var isMoveDistanceX = Number(transform.substring(7).split(",")[4]);
                  if(Math.abs(isMoveDistanceX) <= 0 && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
                  // 判斷數(shù)據(jù)是否加載成功，成功請在當(dāng)前子容器上添加class true
                  var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
                  var children = _this.el.children;
                  var cur_curPage_index = [].indexOf.call(children, cur_curPage);
                  if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index + 1 == children.length && _this.wrapper.getAttribute("getData")== "false")) {
                      if(Math.abs(_this.endPageX - _this.startPageX) >= _this.minDistance && Math.abs(_this.endPageX - _this.startPageX) <= Number(_this.width.replace("px", ""))) {
                          // 開始移動容器
                          var hasMoveDistanceX = isMoveDistanceX + _this.moveDistanceX;
                          _this.el.style.transform = "translate3d("+hasMoveDistanceX+"px, 0, 0)";
                      }
                  }
              } else {
                  // 向左方向移動
                  if(_this.curPage === _this.totalPage) return;
                  // 先判斷是否已加載完成
                  var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
                  var isMoveDistanceX = Number(transform.substring(7).split(",")[4]);
                  if(Math.abs(isMoveDistanceX) >= (_this.el.children.length - 1) * Number(_this.width.replace("px", "")) && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
                  if(_this.wrapper.getAttribute("class").indexOf("next_swiper_subject") >= 0 && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
                  var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
                  var children = _this.el.children;
                  var cur_curPage_index = [].indexOf.call(children, cur_curPage);
                  if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index === 0 && _this.wrapper.getAttribute("getData")== "false")) {
                      if(Math.abs(_this.endPageX - _this.startPageX) >= _this.minDistance && Math.abs(_this.endPageX - _this.startPageX) <= Number(_this.width.replace("px", ""))) {
                          // 開始移動容器
                          var hasMoveDistanceX = isMoveDistanceX + _this.moveDistanceX;
                          _this.el.style.transform = "translate3d("+hasMoveDistanceX+"px, 0, 0)";
                      }
                  }
              }
          }
      }
      this.getTouchEndGrid = function() {
          event.preventDefault();
          event.stopPropagation();
          if(_this.direction === "vertical") {
              if(_this.endPageY - _this.startPageY > 0) {
                  // 向下方向移動
                  if(_this.curPage === 1) return;
                  // 先判斷是否已加載完成
                  var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
                  var isMoveDistanceY = Number(transform.substring(7).split(",")[5].replace(")", ""));
                  if(Math.abs(isMoveDistanceY) <= 0 && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
                  var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
                  var children = _this.el.children;
                  var cur_curPage_index = [].indexOf.call(children, cur_curPage);
                  if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index + 1 == children.length && _this.wrapper.getAttribute("getData")== "false")) {
                      var hasMoveDistanceY = isMoveDistanceY;
                      if(Math.abs(_this.endPageY - _this.startPageY) >= _this.maxDistance) {
                          // 翻頁
                          var needMoveDistanceY = Number(_this.height.replace("px", "")) - (_this.currentPageMoveDistance - Math.abs(hasMoveDistanceY));
                          _this.el.style.transform = "translate3d(0, "+(hasMoveDistanceY + needMoveDistanceY)+"px, 0)";
                          _this.el.style.transition = "transform, "+_this.time+"s";
                          _this.currentPageMoveDistance -= Number(_this.height.replace("px", ""));

                          setTimeout(function() {
                              _this.el.style.transition = "transform, 0s";
                          }, _this.time * 1000);
                          var timer1 = setInterval(function() {
                              // 先判斷是否已加載完成
                              if(_this.loadNextFinish && _this.loadPreFinish) {
                                  clearInterval(timer1)
                                  // 重新賦值
                                  var old_prePage = document.querySelector(_this.elClassName + ".pre_swiper_subject");
                                  var old_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
                                  var old_nextPage = document.querySelector(_this.elClassName + ".next_swiper_subject");
                                  var children = _this.el.children;
                                  var old_prePage_index = [].indexOf.call(children, old_prePage);
                                  old_prePage.setAttribute("class", old_prePage.className.replace("pre_swiper_subject", "current_swiper_subject"));
                                  old_curPage.setAttribute("class", old_curPage.className.replace("current_swiper_subject", "next_swiper_subject"));
                                  if(old_nextPage) {
                                      // 可能會不存在下一頁
                                      old_nextPage.setAttribute("class", old_nextPage.className.replace("next_swiper_subject", ""));
                                  }
                                  _this.wrapper = old_prePage;
                                  _this.curPage -= 1;
                                  if(old_prePage_index == 0) {
                                      // 當(dāng)前頁是第一頁
                                      if(_this.curPage !== 1 && old_prePage.getAttribute("getData")== "true") {
                                          _this.generatePrePage(_this.curPage - 1);
                                          _this.el.style.height = Number(_this.el.style.height.replace("px", "")) + Number(_this.height.replace("px", "")) + "px";
                                          _this.el.style.transform = "translate3d(0, -"+(_this.currentPageMoveDistance + Number(_this.height.replace("px", "")))+"px, 0)";
                                          _this.currentPageMoveDistance += Number(_this.height.replace("px", ""));
                                      }
                                  } else {
                                      // 已存在上一頁
                                      children[old_prePage_index - 1].setAttribute("class", children[old_prePage_index - 1].className+" pre_swiper_subject");
                                  }
                              }
                          }, 10)


                      } else {
                          // 回退到當(dāng)前頁面
                          _this.el.style.transform = "translate3d(0, -"+_this.currentPageMoveDistance+"px, 0)";
                      }
                  }
              } else {
                  // 向上方向移動
                  if(_this.curPage === _this.totalPage) return;
                  // 先判斷是否已加載完成
                  var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
                  var isMoveDistanceY = Number(transform.substring(7).split(",")[5].replace(")", ""));
                  if(Math.abs(isMoveDistanceY) >= (_this.el.children.length - 1) * Number(_this.height.replace("px", "")) && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
                  var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
                  var children = _this.el.children;
                  var cur_curPage_index = [].indexOf.call(children, cur_curPage);
                  if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index === 0 && _this.wrapper.getAttribute("getData")== "false")) {
                      var hasMoveDistanceY = isMoveDistanceY;
                      if(Math.abs(_this.endPageY - _this.startPageY) >= _this.maxDistance) {
                          // 翻頁
                          var needMoveDistanceY = Number(_this.height.replace("px", "")) - (Math.abs(hasMoveDistanceY) - _this.currentPageMoveDistance);
                          _this.el.style.transform = "translate3d(0, "+(hasMoveDistanceY - needMoveDistanceY)+"px, 0)";
                          _this.el.style.transition = "transform, "+_this.time+"s";
                          _this.currentPageMoveDistance += Number(_this.height.replace("px", ""));

                          setTimeout(function() {
                              _this.el.style.transition = "transform, 0s";
                          }, _this.time * 1000);

                          var timer2 = setInterval(function() {
                              // 先判斷是否已加載完成
                              if(_this.loadNextFinish && _this.loadPreFinish) {
                                  clearInterval(timer2);
                                  // 重新賦值
                                  var old_prePage = document.querySelector(_this.elClassName + ".pre_swiper_subject");
                                  var old_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
                                  var old_nextPage = document.querySelector(_this.elClassName + ".next_swiper_subject");
                                  var children = _this.el.children;
                                  var old_nextPage_index = [].indexOf.call(children, old_nextPage);
                                  if(old_prePage) {
                                      // 可能會不存在上一頁
                                      old_prePage.setAttribute("class", old_prePage.className.replace("pre_swiper_subject", ""));
                                  }
                                  old_curPage.setAttribute("class", old_curPage.className.replace("current_swiper_subject", "pre_swiper_subject"));
                                  old_nextPage.setAttribute("class", old_nextPage.className.replace("next_swiper_subject", "current_swiper_subject"));
                                  _this.wrapper = old_nextPage;
                                  _this.curPage += 1;
                                  if(old_nextPage_index + 1 === children.length) {
                                      // 當(dāng)前頁已是最后一頁
                                      if(_this.curPage !== _this.totalPage && old_nextPage.getAttribute("getData")== "true") {
                                          _this.generateNextPage(_this.curPage + 1);
                                          _this.el.style.height = Number(_this.el.style.height.replace("px", "")) + Number(_this.height.replace("px", "")) + "px";
                                      }
                                  } else {
                                      // 已存在下一頁
                                      children[old_nextPage_index + 1].setAttribute("class", children[old_nextPage_index + 1].className+" next_swiper_subject");
                                  }
                              }

                          }, 10);
                      } else {
                          // 回退到當(dāng)前頁面
                          _this.el.style.transform = "translate3d(0, -"+_this.currentPageMoveDistance+"px, 0)";
                      }
                  }
              }
          } else {
              if(_this.endPageX - _this.startPageX > 0) {
                  // 向右方向移動
                  if(_this.curPage === 1) return;
                  // 先判斷是否已加載完成
                  var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
                  var isMoveDistanceX = Number(transform.substring(7).split(",")[4]);
                  if(Math.abs(isMoveDistanceX) <= 0 && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
                  var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
                  var children = _this.el.children;
                  var cur_curPage_index = [].indexOf.call(children, cur_curPage);
                  if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index + 1 == children.length && _this.wrapper.getAttribute("getData")== "false")) {
                      var hasMoveDistanceX = isMoveDistanceX;
                      if(Math.abs(_this.endPageX - _this.startPageX) >= _this.maxDistance) {
                          // 翻頁
                          var needMoveDistanceX = Number(_this.width.replace("px", "")) - (_this.currentPageMoveDistance - Math.abs(hasMoveDistanceX));
                          _this.el.style.transform = "translate3d("+(hasMoveDistanceX + needMoveDistanceX)+"px, 0, 0)";
                          _this.el.style.transition = "transform, "+_this.time+"s";
                          _this.currentPageMoveDistance -= Number(_this.width.replace("px", ""));

                          setTimeout(function() {
                              _this.el.style.transition = "transform, 0s";
                          }, _this.time * 1000);
                          var timer1 = setInterval(function() {
                              // 先判斷是否已加載完成
                              if(_this.loadNextFinish && _this.loadPreFinish) {
                                  clearInterval(timer1)
                                  // 重新賦值
                                  var old_prePage = document.querySelector(_this.elClassName + ".pre_swiper_subject");
                                  var old_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
                                  var old_nextPage = document.querySelector(_this.elClassName + ".next_swiper_subject");
                                  var children = _this.el.children;
                                  var old_prePage_index = [].indexOf.call(children, old_prePage);
                                  old_prePage.setAttribute("class", old_prePage.className.replace("pre_swiper_subject", "current_swiper_subject"));
                                  old_curPage.setAttribute("class", old_curPage.className.replace("current_swiper_subject", "next_swiper_subject"));
                                  if(old_nextPage) {
                                      // 可能會不存在下一頁
                                      old_nextPage.setAttribute("class", old_nextPage.className.replace("next_swiper_subject", ""));
                                  }
                                  _this.wrapper = old_prePage;
                                  _this.curPage -= 1;
                                  if(old_prePage_index == 0) {
                                      // 當(dāng)前頁是第一頁
                                      if(_this.curPage !== 1 && old_prePage.getAttribute("getData")== "true") {
                                          _this.generatePrePage(_this.curPage - 1);
                                          _this.el.style.width = Number(_this.el.style.width.replace("px", "")) + Number(_this.width.replace("px", "")) + "px";
                                          _this.el.style.transform = "translate3d(-"+(_this.currentPageMoveDistance + Number(_this.width.replace("px", "")))+"px, 0, 0)";
                                          _this.currentPageMoveDistance += Number(_this.width.replace("px", ""));
                                      }
                                  } else {
                                      // 已存在上一頁
                                      children[old_prePage_index - 1].setAttribute("class", children[old_prePage_index - 1].className+" pre_swiper_subject");
                                  }
                              }
                          }, 10)


                      } else {
                          // 回退到當(dāng)前頁面
                          _this.el.style.transform = "translate3d(-"+_this.currentPageMoveDistance+"px, 0, 0)";
                      }
                  }
              } else {
                  // 向左方向移動
                  if(_this.curPage === _this.totalPage) return;
                  // 先判斷是否已加載完成
                  var transform = document.defaultView.getComputedStyle(_this.el, null).transform;
                  var isMoveDistanceX = Number(transform.substring(7).split(",")[4]);
                  if(Math.abs(isMoveDistanceX) >= (_this.el.children.length - 1) * Number(_this.width.replace("px", "")) && (!_this.loadNextFinish || !_this.loadPreFinish)) return;
                  var cur_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
                  var children = _this.el.children;
                  var cur_curPage_index = [].indexOf.call(children, cur_curPage);
                  if(_this.wrapper.getAttribute("getData")== "true" || (cur_curPage_index === 0 && _this.wrapper.getAttribute("getData")== "false")) {
                      var hasMoveDistanceX = isMoveDistanceX;
                      if(Math.abs(_this.endPageX - _this.startPageX) >= _this.maxDistance) {
                          // 翻頁
                          var needMoveDistanceX = Number(_this.width.replace("px", "")) - (Math.abs(hasMoveDistanceX) - _this.currentPageMoveDistance);
                          _this.el.style.transform = "translate3d("+(hasMoveDistanceX - needMoveDistanceX)+"px, 0, 0)";
                          _this.el.style.transition = "transform, "+_this.time+"s";
                          _this.currentPageMoveDistance += Number(_this.width.replace("px", ""));

                          setTimeout(function() {
                              _this.el.style.transition = "transform, 0s";
                          }, _this.time * 1000);

                          var timer2 = setInterval(function() {
                              // 先判斷是否已加載完成
                              if(_this.loadNextFinish && _this.loadPreFinish) {
                                  clearInterval(timer2);
                                  // 重新賦值
                                  var old_prePage = document.querySelector(_this.elClassName + ".pre_swiper_subject");
                                  var old_curPage = document.querySelector(_this.elClassName + ".current_swiper_subject");
                                  var old_nextPage = document.querySelector(_this.elClassName + ".next_swiper_subject");
                                  var children = _this.el.children;
                                  var old_nextPage_index = [].indexOf.call(children, old_nextPage);
                                  if(old_prePage) {
                                      // 可能會不存在上一頁
                                      old_prePage.setAttribute("class", old_prePage.className.replace("pre_swiper_subject", ""));
                                  }
                                  old_curPage.setAttribute("class", old_curPage.className.replace("current_swiper_subject", "pre_swiper_subject"));
                                  old_nextPage.setAttribute("class", old_nextPage.className.replace("next_swiper_subject", "current_swiper_subject"));
                                  _this.wrapper = old_nextPage;
                                  _this.curPage += 1;
                                  if(old_nextPage_index + 1 === children.length) {
                                      // 當(dāng)前頁已是最后一頁
                                      if(_this.curPage !== _this.totalPage && old_nextPage.getAttribute("getData")== "true") {
                                          _this.generateNextPage(_this.curPage + 1);
                                          _this.el.style.width = Number(_this.el.style.width.replace("px", "")) + Number(_this.width.replace("px", "")) + "px";
                                      }
                                  } else {
                                      // 已存在下一頁
                                      children[old_nextPage_index + 1].setAttribute("class", children[old_nextPage_index + 1].className+" next_swiper_subject");
                                  }
                              }

                          }, 10);
                      } else {
                          // 回退到當(dāng)前頁面
                          _this.el.style.transform = "translate3d(-"+_this.currentPageMoveDistance+"px, 0, 0)";
                      }
                  }
              }
          }

      }
      /**
       * 生成上一頁的容器
       */
      this.generatePrePage = function(page, boolean) {
          _this.loadPreFinish = false;
          var className = _this.wrapper.getAttribute("class");
          className = className.replace("current_swiper_subject", "pre_swiper_subject").replace("true", "");
          var prePage = document.createElement("div");
          prePage.className = className;
          if(_this.direction !== "vertical") {
              prePage.style.float = "left";
              prePage.style.overflowX = "hidden";
              prePage.style.overflowY = "auto";
              prePage.style.padding =  "0 2px";
          } else {
              prePage.style.overflow = "hidden";
          }
          prePage.style.height = _this.height;
          prePage.style.width = _this.width;
          if(!boolean) {
              prePage.innerHTML = "<div>加載中...</div>";
          }
          _this.el.insertBefore(prePage,_this.el.firstChild);
          _this.getData(_this.elClassName + ".pre_swiper_subject", page, _this.successFun, _this.failFun);
      }
      /**
       * 生成下一頁的容器
       */
      this.generateNextPage = function(page) {
          _this.loadNextFinish = false;
          var className = _this.wrapper.getAttribute("class");
          className = className.replace("current_swiper_subject", "next_swiper_subject").replace("true", "");
          var nextPage = document.createElement("div");
          nextPage.className = className;
          if(_this.direction !== "vertical") {
              nextPage.style.float = "left";
              nextPage.style.overflowX = "hidden";
              nextPage.style.overflowY = "auto";
              nextPage.style.padding =  "0 2px";
          } else {
              nextPage.style.overflow = "hidden";
          }
          nextPage.style.height = _this.height;
          nextPage.style.width = _this.width;
          nextPage.innerHTML = "<div>加載中2...</div>";
          _this.el.appendChild(nextPage);
          _this.getData(_this.elClassName + ".next_swiper_subject", page, _this.successFun, _this.failFun);
      }
      /**
       * successFun 獲取數(shù)據(jù)成功后需要執(zhí)行的方法
       */
      this.successFun = function(className, totalPages) {
            _this.totalPage = totalPages;
            var elem = document.querySelector(className);
            if(!elem.getAttribute("getData")) {
                elem.setAttribute("getData", "true");
            } else if(elem.getAttribute("getData") == "false") {
                // refress-data重新獲取數(shù)據(jù)，成功后的回調(diào)
                var children = _this.el.children;
                var elem_index = [].indexOf.call(children, elem);
                if(elem_index === 0) {
                    // 當(dāng)前頁為第一頁
                    if(_this.curPage !== 1) {
                          _this.generatePrePage(_this.curPage - 1);
                          _this.el.style.width = Number(_this.el.style.width.replace("px", "")) + Number(_this.width.replace("px", "")) + "px";
                          _this.el.style.transform = "translate3d(-"+(_this.currentPageMoveDistance + Number(_this.width.replace("px", "")))+"px, 0, 0)";
                          _this.currentPageMoveDistance += Number(_this.width.replace("px", ""));
                      }
                } else {
                    if(_this.curPage !== _this.totalPage) {
                          _this.generateNextPage(_this.curPage + 1);
                          _this.el.style.width = Number(_this.el.style.width.replace("px", "")) + Number(_this.width.replace("px", "")) + "px";
                      }
                }
            }

            if(className.indexOf(".pre_swiper_subject") >= 0) {
                _this.loadPreFinish = true;
            } else if(className.indexOf(".next_swiper_subject") >= 0) {
                _this.loadNextFinish = true;
            }
      }
      /**
       * failFun 獲取數(shù)據(jù)失敗后需要執(zhí)行的方法
       */
      this.failFun = function(className) {
          var elem = document.querySelector(className);
          elem.setAttribute("getData", "false");
          elem.innerHTML = '<div><span class="refress-data" style="color: blue;">重新刷新</span></div>';
          document.querySelector(_this.elClassName + ".refress-data").addEventListener("touchstart", function() {
              _this.getData(_this.elClassName + ".current_swiper_subject", _this.curPage, _this.successFun, _this.failFun);
          });
          if(className.indexOf(".pre_swiper_subject") >= 0) {
              _this.loadPreFinish = true;
          } else if(className.indexOf(".next_swiper_subject") >= 0) {
              _this.loadNextFinish = true;
          }
      }
      /**
       * 添加事件
       */
      this.addEvent = function() {
          //_this.el.addEventListener("touchstart", _this.getStartTouchGrid);
         // _this.el.addEventListener("touchmove", _this.getTouchMoveGrid);
          //_this.el.addEventListener("touchend", _this.getTouchEndGrid);
          _this.el.ontouchstart = getStartTouchGrid;
          _this.el.ontouchmove = getTouchMoveGrid;
          _this.el.ontouchend = getTouchEndGrid;
      }
      /**
       * 移除事件
       */
      this.removeEvent = function() {
          _this.el.removeEventListener("touchstart", _this.getStartTouchGrid);
          _this.el.removeEventListener("touchmove", _this.getTouchMoveGrid);
          _this.el.removeEventListener("touchend", _this.getTouchEndGrid);
      }
      /**
       * 初始化插件
       */
      this.initSwiper = function() {
          _this.addEvent();
          // 為當(dāng)前頁面添加class
          if(_this.direction === "vertical") {
              var contianer = document.createElement("div");
              contianer.style.height = options.height ?  Number(options.height.replace("px", ""))  + "px" : document.body.clientHeight + "px" ;
              contianer.style.width = options.width || document.body.clientWidth + "px" ;
              _this.el.style.overflow = "hidden";
              _this.el.style.height = options.height || document.body.clientHeight + "px" ;
              _this.el.style.width = options.width || document.body.clientWidth + "px" ;
              _this.el.innerHTML = "";
              _this.el.appendChild(contianer);
              _this.el = contianer;
              _this.el.appendChild(_this.wrapper);
              _this.height = options.height || document.body.clientHeight + "px";
              _this.width = options.width || _this.el.offsetWidth + "px";
              _this.wrapper.style.overflow = "hidden";
          } else {
              _this.el.style.height = options.height || document.body.clientHeight + "px" ;
              _this.el.style.width = options.width ? Number(options.width.replace("px", "")) + "px" : document.body.clientWidth + "px";
              _this.wrapper.style.float = "left";
              _this.wrapper.style.overflowX = "hidden";
              _this.wrapper.style.overflowY = "auto";
              _this.wrapper.style.padding =  "0 2px";
              _this.height = options.height || _this.el.offsetHeight + "px";
              _this.width = options.width || document.body.clientWidth + "px";
          }
          _this.wrapper.style.height = _this.height;
          _this.wrapper.style.width = _this.width;


          // 自動生成上下一頁的內(nèi)容容器及數(shù)據(jù)
          if(_this.curPage !== 1) {
              // 非首頁
              _this.generatePrePage(_this.curPage - 1, true);
              _this.el.style.width = Number(_this.el.style.width.replace("px", "")) + Number(_this.width.replace("px", "")) + "px";
              var elem = document.querySelector(_this.elClassName + ".pre_swiper_subject");
              if(_this.direction === "vertical") {
                  _this.el.style.transform = "translate3d(0, -"+_this.height+", 0)";
                  _this.currentPageMoveDistance = Number(_this.height.replace("px", ""));
              } else {
                  _this.el.style.transform = "translate3d(-"+_this.width+", 0, 0)";
                  _this.currentPageMoveDistance = Number(_this.width.replace("px", ""));
              }
          };
          if(_this.curPage !== _this.totalPage) {
              // 存在下一頁
              _this.generateNextPage(_this.curPage + 1);
              _this.el.style.width = Number(_this.el.style.width.replace("px", "")) + Number(_this.width.replace("px", "")) + "px";
          }
      }

      /**
       * 初始化，獲取數(shù)據(jù)
       */
      this.init = function() {
          var classList = _this.wrapper.getAttribute("class");
          if(classList.indexOf("current_swiper_subject") == -1) {
              _this.wrapper.setAttribute("class", classList + " current_swiper_subject");
          }
          _this.getData(_this.elClassName + ".current_swiper_subject", _this.curPage, _this.successFun, _this.failFun);
      }

      // 初始化，只在初次構(gòu)建才會執(zhí)行初始化
      if(!_this.refresh && _this.el && _this.wrapper && _this.getData) {
          _this.refresh = true;
          _this.init();
          _this.initSwiper();
      }
  }
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,366評論 25贊 708
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,207評論 1贊 92
  • 《我是媽媽，在夾縫中頑強(qiáng)盛開的花》 文/空十年 我的偏頭疼又犯了，睡不好的緣故。 清晨，疲憊地靠坐在沙發(fā)上，看佑佑...
    空十年閱讀 745評論 0贊 2
  • 允許是一個無限寬廣的范圍，允許讓我體會到如實的存在和愛。這兩年我都在練習(xí)允許。允許自己去感受，體驗
    夏虹正如閱讀 241評論 0贊 0

友情鏈接更多精彩內(nèi)容