搜索列表（三）-页面滚动到底部触发数据加载 & 列表数据累加操作 & 加载完成临界条件处理-数据的长度

本文链接：https://blog.csdn.net/weixin_44867717/article/details/109289461

页面滚动到底部触发数据加载

  // 监控小程序页面的触底操作，加载下一页数据
onReachBottom () {
  // 滚动条触底的时候触发该方法
  this.loadData()
}

实例

  onReachBottom () {
    // 监控小程序页面的触底操作
    if(this.list.length >= this.total) {
      // 数据加载完成
      this.isFinished = false
      return
    }
    // 加载下一页数据,页码累加操作
    this.pagenum = this.pagenum + 1
    this.loadData()
  },

触底触发

在这里插入图片描述

加载完成

在这里插入图片描述

默认为0页，改为默认第一页pagenum: 1,

  data () {
    return {
      kw: '',
      tabData: ['综合', '销量', '价格'],
      currentIndex: 0,
      // 当前请求的数据页码
      pagenum: 1,
      // 没有显示多少条
      pagesize: 5,
      // 查询结果
      list: [],
      // 列表总数
      total: 0,
      // 判断数据是否加载完成
      isFinished: true,
      // 接口调用的状态为
      isLoading: false
    }
  },

图例

在这里插入图片描述

此时，每页数据单独加载；如果要处理分页，数据需要进行累加

  methods: {
    async loadData () {
      // 判断当前接口调用是否完成
      if(this.isLoading) {
        // 表示正在发送请求，尚未获取到后台数据
        // 此时应该终止后续请求
        return
      }
      this.isLoading = true
      // 获取列表数据
      // 需要保证：上一次请求加载成功后，才能发送下一个请求
      let res = await request('goods/search', {
        query: this.kw,
        pagenum: this.pagenum,
        pagesize: this.pagesize
      })
      // 如果要处理分页，数据需要进行累加
      this.list = [...this.list, ...res.goods]
      this.total = res.total
      // 获取到后台返回数据之后，才允许再次发送新的请求
      this.isLoading = false
    },
    handleChange (e) {
      // 控制选项卡切换
      this.currentIndex = e.target.dataset.index
    }
  },

累加加载数据

在这里插入图片描述

判断加载的临界状态：加载完后，数据不再请求，加载更多消失

结构

    <!-- 加载更多提示  默认显示   -->
    <div class="more" v-if='isFinished'>加载更多...</div>

数据

import request from '../../utils/request.js'

export default {
  data () {
    return {
      kw: '',
      tabData: ['综合', '销量', '价格'],
      currentIndex: 0,
      // 当前请求的数据页码
      pagenum: 1,
      // 没有显示多少条
      pagesize: 5,
      // 查询结果
      list: [],
      // 列表总数
      total: 0,
      // 判断数据是否加载完成
      isFinished: true,
      // 接口调用的状态为
      isLoading: false
    }
  },
    onReachBottom () {
    // 监控小程序页面的触底操作
    if(this.list.length >= this.total) {
      // 数据加载完成  不显示
      this.isFinished = false
      return
    }
    // 加载下一页数据,页码累加操作
    this.pagenum = this.pagenum + 1
    this.loadData()
  },
}