H5页⾯列表的⽆线滚动加载（前端分页）
本代码基于Vue的架构
1.⾸先，要滚动的内容放在⼀个‘id=box’ 的div⾥，对div进⾏scroll事件的监听
<div id="box" class="midea2" @scroll="boxScroll" :>
</div>
<load-more 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,
部分解释：html滚动效果代码
在移动端上，在你⽤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 (JoinList.length < perpage || (resident.paginator.pageNo - 1) * perpage + JoinList.length > alCount) {
if (alCount / 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 = at(_.cloneDeep( this.wholeList ).splice(this.questionList.length, perpage * (this.pageNo + 1)))
if (Number(this.isMyAnswer) === 1) {
this.arrangeAnswer()
}
this._checkMore()
},
注：this.questionList 表⽰，页⾯上展⽰的列表this.wholeList 表⽰，查询出来的所有列表