【轉載】H5頁面列表的無線滾動加載（前端分頁）

本代碼基於Vue的架構

1.首先，要滾動的內容放在一個‘id=box’ 的div裏，對div進行scroll事件的監聽

<div id="box" class="midea2" @scroll="boxScroll" style="-webkit-overflow-scrolling: touch; flex=1" :style="{height: appHeight + 'px'}">
</div>

<load-more style="width: 100%; margin-top: 20px;" v-if="questionList.length !== 0" v-show="!isLogic" :tip="loadText" :show-loading="showLoad"></load-more>

參數配置：

const perpage = 10

hasMore: true, // 標記是否還有數據
loadText: '', // loading時的文字
showLoading: false, // 展現界面loading
pageNo: 1,
pageLimit: perpage, 
totalCount: 0,

部分解釋：

 在移動端上，在你用overflow-y:scorll屬性的時候，你會發現滾動的效果很木，很慢，這時候可使用-webkit-overflow-scrolling:touch這個屬性，讓滾動條產生滾動回彈的效果，就像ios原生的滾動條同樣流暢。

首先，頁面初始化，前端分頁，把所有列表數據賦給一個變量： this.wholeList 

引入要引用的：

import _ from 'lodash'

 boxScroll監聽事件：

      // 監聽box滾動
      boxScroll (e) {
        let box = e.target
        // console.log('box is scrolling')
        if (box.scrollHeight - box.scrollTop === box.offsetHeight && box.scrollTop !== 0) {
          this.showLoad = true
          console.log('bottom~~')
          this._checkMore()
          setTimeout(this.searchMore, 700)
          // this.searchMore()
        }
      },

檢測是否還有'下一頁'的方法：

     _checkMore () {
        // const resident = data.data
        // if (resident.myJoinList.length < perpage || (resident.paginator.pageNo - 1) * perpage + resident.myJoinList.length > resident.paginator.totalCount) {
        if (parseInt(this.totalCount / perpage) + 1 === this.pageNo) {
          this.hasMore = false
          this.showLoad = false
          this.loadText = '暫無更多數據'
        }
      },

查詢‘下一頁’數據的方法：

      searchMore () {
        if (!this.hasMore) {
          return
        }
        this.pageNo++
        this.queryQuestionList()
      },

對列表進行前端分頁：

     // 對問卷列表前端分頁
      queryQuestionList () {
        if (!this.isFrontPage) {
          return
        }
        // this.questionList = _.cloneDeep(this.wholeList).splice(0, perpage * (this.pageNo + 1))
        this.questionList = this.questionList.concat(_.cloneDeep( this.wholeList ).splice(this.questionList.length, perpage * (this.pageNo + 1)))
        if (Number(this.isMyAnswer) === 1) {
          this.arrangeAnswer()
        }
        this._checkMore()
      },

注： this.questionList  表示，頁面上展現的列表

     this.wholeList 表示，查詢出來的全部列表