【Vue】移动端h5前端分页加载,下拉加载新的分页数据
最近做一个客服通话记录页面,查询后端数据需要用到分页查询,如果在pc端可以通过搜索页码或者点击上一页、下一页查看对应页码的数据;但是在移动端,通常是用上拉、下滑的方式查看不同分页的数据。按这个思路,需要对屏幕的滑动进行监听,当滑动到底时请求新的分页数据。
<template>
<section class="callRecord">
<div v-if="recordArr.length" class="pageWrapper">
<div v-for="item in recordArr" class="recordList" @click="callPhone(item.call_phone)">
<div class="detail">
<div class="phone">{{ item.call_phone }}</div>
<div class="state">
<span v-if="item.businessType==='1'" class="duration">通话:{{ item.call_length }}</span>
<span v-else class="duration">未接通</span>
</div>
</div>
</div>
</div>
<div v-else class="emp">暂无通话记录</div>
</section>
</template>
在created生命周期中增加onscroll事件
created() {
window.onscroll = () => {
const { totalNum, rows, getCallRecord } = this
// 页码计算,用来判断是否能继续加载分页数据
const pageNum = totalNum % rows === 0 ? totalNum / rows : parseInt(totalNum / rows) + 1
// 滚动条滚动时,距离顶部的距离
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 可视区的高度
const windowHeight = document.documentElement.clientHeight || document.body.clientHeight
// 滚动条的总高度
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
// 滚动条到底部的条件
if (scrollTop + windowHeight === scrollHeight) {
console.log('get bottom')
if (pageNum > 1 && pageNum > Number(this.page)) {
this.page = String(++this.page) // 改变页码
// 请求后端分页数据。这里也可以用setTimeOut增加一定延时,做些别的操作。我这里是为了有无缝加载的感觉,没有加延时。
getCallRecord()
// box.scrollIntoView() // 滚动条回到顶
}
}
}
}
这里用的是项目中封装的axios方法,具体请求数据的方式,根据项目需求来写就好。
// 获取通话记录列表
async getCallRecord() {
const { investorId, page, rows, aesKey, desKey, getCallLength, getCallTime, maps, getCallState } = this
// 加密
const aesData = encrypt(JSON.stringify({ investorId, page, rows }), aesKey)
// 请求数据
const { status, result = {}} = await http.request('select', { RequestBody: aesData }, {})
// status不为1时请求失败
if (status - 1 !== 0) return
// 赋值,处理数据
result.rows = result.rows.map(item => {
item.call_length = getCallLength(item.call_length, item.businessType)
item.call_phone = decryptDES(item.call_phone, desKey)
// 。。。
return item
})
// 加载下一分页的时候,将结果和之前的结果进行合并。这样向上滑动时不用重新请求数据
this.recordArr = [...this.recordArr, ...result.rows]
// 数据总数,用来计算总分页数
this.totalNum = result.total
}
到这里,我所需要的下拉无缝加载新的分页数据效果就完成了,具体的加载方式可以根据实际需求进行调整,关键就是在滑动监听事件中判断加载数据或者其他操作的时机。