【Vue】移动端h5前端分页加载，下拉加载新的分页数据_h5 vue下拉分页

【Vue】移动端h5前端分页加载，下拉加载新的分页数据

最近做一个客服通话记录页面，查询后端数据需要用到分页查询，如果在pc端可以通过搜索页码或者点击上一页、下一页查看对应页码的数据；但是在移动端，通常是用上拉、下滑的方式查看不同分页的数据。按这个思路，需要对屏幕的滑动进行监听，当滑动到底时请求新的分页数据。

• HTML结构

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 增加监听屏幕滑动的事件（实现效果的关键）

在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()  // 滚动条回到顶
          }
        }
      }
    }
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

• 请求后台分页数据

这里用的是项目中封装的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
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

到这里，我所需要的下拉无缝加载新的分页数据效果就完成了，具体的加载方式可以根据实际需求进行调整，关键就是在滑动监听事件中判断加载数据或者其他操作的时机。