【转载】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 表示，查询出来的所有列表