vue10行代碼實現上拉翻頁加載更多數據，純手寫js實現下拉刷新上拉翻頁不引用任何第三方插件

vue10行代碼實現上拉翻頁加載更多數據，純手寫js實現下拉刷新上拉翻頁不引用任何第三方插件/庫

一提到移動端的下拉刷新上拉翻頁，你可能就會想到iScroll插件，沒錯iScroll是一個高性能，資源佔用少，無依賴，多平臺的javascript滾動插件。iScroll不單單是 滾動。它能夠處理任何須要與用戶進行移動交互的元素。在你的項目中包含僅僅4kb大小的iScroll，你的項目便擁有了滾動，縮放，平移，無限滾動，視差滾動，旋轉功能。iScroll的強大毋庸置疑，本人也很是歡迎你們使用iScroll。還有dropload也是挺好用的。
本文講到的上拉翻頁加載更多方法的核心思路其實很簡單，思路一看就懂，大道至簡嘛，雖然代碼不多，不過實現過程當中的視圖與數據的交互邏輯還有有些複雜，不細心的話，很容易蒙圈，每每特別簡單的東西，背後都有很細緻入微的邏輯關係。
本文的方法，初步是在vue-cli的環境下實現，代碼包含了template和script，方法有用到document，window對象，第一版有些粗糙。

本文實現上拉翻頁加載更多的核心思路就是：若是「正在加載」這個層被上拉超出頁面底部，就觸發加載下一頁的方法，對就是這麼簡單！

本文方法最繁瑣的地方主要在於交互方面：幾個「正在加載」的層根據數據渲染的時機和上拉操做時候的顯隱控制。方法裏面大多數語句後面都有註釋講解，細心點應該能理順邏輯。本文只寫了上拉翻頁的功能展現，下來刷新更簡單也一樣的道理(每次觸發都只加載第一頁就能夠了)，本文的方法思路一樣能夠運用於jquery、react、angular……等其餘框架，由於簡單，因此便捷。理解思路最重要，理解之後徹底能夠本身手寫。
有時候看似複雜的問題，每每能夠劍走偏鋒，曲線救國！

好了下面直接上代碼！

一、template部分：

1 2 3 4 5 6 7 8 9 10 11 12

<template>      <div v- if = "!!dataList.length" >          <div v- for = "(item,index) in dataList" >              <!-- 數據展現列表 -->          </div>          <div id= "loadMore"  v-show= "loadMore" >正在加載</div><!-- 第一次加載數據 -->          <div id= "loadMoreing"  v-show= "loadMoreing" >正在加載</div><!-- 上拉加載數據 -->          <div id= "noMoreData"  v-show= "loadMore?false:!loadMoreing" >已顯示所有任務</div><!-- 全部數據加載完成 -->      </div>      <div id= "loadMoreing"  v- else - if = "loadMoreing" >正在加載</div><!-- 頁面渲染時 -->      <div  class = "noData"  v- else >沒有數據</div> </template>

二、script部分

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

export  default  {      data () {          return  {              dataList: new  Array,              dataCurPage:1, // 數據頁碼              loadMore: true , // 第一次加載數據時的正在加載              loadMoreing: true , // 上拉加載數據時的正在加載          }      },      mounted: function (){          let  onScroll = window.addEventListener( 'scroll' ,  this .scrollRun); // 監聽滾動      },      methods:{          getdataList: function (){              this .loadMoreing =  true ;              let  _self =  this ;              $.ajax({                  type: "post" ,                  async:  false ,                  timeout : 10000,                  dataType: "json" ,                  url: "" ,                  data:{curPage:_self.dataCurPage},                  success: function (data){                      _self.loadMoreing =  false ; // 接收到數據時，隱藏正在加載                      if (!!data.dataList.length){ // 若是有數據                          if (_self.dataCurPage==1){ // 當加載第1頁數據時                              _self.dataList =  new  Array; // 第1頁清空數據                              if (data.dataList.length>0){ // 若是第1頁數據條數大於0                                  data.dataList.forEach( function (ele,i){                                      _self.dataList.push(ele); // 填充頁面數據                                  })                                  _self.loadMore =  true ; // 顯示正在加載(在屏幕底部之外)                              } else {                                  _self.loadMore =  false ; // 沒有數據則隱藏正在加載                              }                          } else { // 當加載第2頁及其之後的數據時                              if (data.dataList.length>0){                                  data.dataList.forEach( function (ele,i){                                      _self.dataList.push(ele); // 填充頁面數據                                  })                                  _self.loadMore =  true ; // 顯示正在加載(在屏幕底部之外)                              } else {                                  _self.loadMore =  false ; // 沒有數據則隱藏正在加載                              }                          }                          //若是總頁數==當前頁=>沒有更多數據了                          if (data.totalPage==_self.dataCurPage){                              _self.loadMore =  false ;                              _self.loadMoreing =  false ;                          }                      }                         },                  error: function (xhr,status,error){                      console.log( "錯誤" ,xhr,status,error);                      if (status ==  "timeout" ){_self.loadMoreing =  false ;weui.toast( '請求超時' , 800);}                  },                  complete: function (){_self.loadMoreing =  false ;}              })          },          scrollRun: function (){ // 核心代碼              if ( this .loadMore ==  true &&!!document.getElementById( "loadMore" )){ //若是總共有一頁以上數據，才運行                  let  bodyWidth = document.body.offsetWidth;                  let  bodyHeight = window.innerHeight*(375/bodyWidth); // 以6s屏幕爲基準比例                  let  loadMoreTop = document.getElementById( "loadMore" ).getBoundingClientRect().top*(375/bodyWidth); //loadMore距離頂部的距離                        if (bodyHeight-loadMoreTop>20){ //loadMore被拉出底部20px時                      // console.log("bodyHeight",bodyHeight,"loadMoreTop",loadMoreTop,"差值",bodyHeight-loadMoreTop,"頁碼",this.dataCurPage+1);                      this .loadMore =  false ; //中止運行scrollRun，不然會觸發加載全部頁面                      this .getMoreList(_self.dataCurPage++);                  }              }          },      } }