vant list列表组件分页场景使用及搜索框输入-请求数据-防抖处理

画了五官的猕猴

已于 2023-05-25 13:42:36 修改

阅读量2.2k

点赞数

文章标签： list java javascript

于 2023-05-25 11:57:23 首次发布

本文链接：https://blog.csdn.net/luoxiaonuan_hi/article/details/130853454

版权

文章讲述了如何使用vantList组件实现分页加载功能，通过设置接口参数、管理加载状态和数据数组来处理分页数据。同时，文章还介绍了搜索框的防抖处理，以减少频繁请求，提高性能。在防抖函数中，监听搜索值变化并在设定的延迟后执行请求。

摘要由CSDN通过智能技术生成

需求：使用vant List列表组件实现页面分页加载，分页数据后端返回

template模版：

<van-list
  v-if="!noData"
  v-model:loading="loadingpage"
  :finished="finishedpage"
  finished-text="没有更多数据了"
  @load="onLoad"
>
   <div
       class="recommendItem"
       v-for="(item, index) in collectPositioninfoList"
       :key="index"
       @click="recommendItemClick(item.id)"
    >
  </div>
</van-list>

js分页写法

// 定义接口参数
const current = ref(1)
const size = 10
const total = ref(0)

// 定义分页相关数据
const loadingpage = ref(false)
const finishedpage = ref(false)

// 控制占位图显示
const noData = ref(false)

// 定义接口数据数组
const collectPositioninfoList = ref([])

//封装接口请求数据方法
const getList = async (obj) => {
  const {
    data,
    data: { records } //对数据 data 和列表数据 records 进行结构
  } = aw