vant中页面分页加载

最新推荐文章于 2024-04-10 11:15:25 发布

又菜又不想学的小张

最新推荐文章于 2024-04-10 11:15:25 发布

阅读量515

点赞数

分类专栏： vant vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_45108358/article/details/128644868

版权

vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vant

3 篇文章 0 订阅

订阅专栏

<template>
  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="list">
    <div class="item" v-for="(item, index) in listData" :key="index">
      <div class="tit">{{ item.categoryName }}</div>
      <div class="masterName">{{ item.masterName }}</div>
    </div>
  </van-list>
</template>

<script setup>
import { vue3Test } from '@/api/vue3Ref'
import { ref, reactive, onMounted, toRefs } from 'vue';
const vantList = reactive({
  loading: false,
  finished: false
})
const list1 = reactive({
  listData: [],
  page:1
})
onMounted(() => {
})
const onLoad = () => {
  console.log(1);
  let params={
    currPage: list1.page
  }
  // 分页加载核心代码
  vue3Test(params).then(res => {
    list1.listData=[...list1.listData,...res.list];
    vantList.loading=false
    list1.page+=1
    if(res.list.length<10){
      vantList.finished=true
    }
  })
  // 分页加载核心代码结束
};
const { listData } = toRefs(list1)
const { loading, finished } = toRefs(vantList) //必须加上，否则使用reactive声明的将会变乱；也可以使用ref来进行声明
</script>

<style lang="scss" scoped>
.list {
  width: 200px;
  padding-left: 100px;
  padding-top: 100px;

  .item {
    width: 400px;
    height: 200px;
    border: 1px solid skyblue;
    margin-bottom: 20px;
  }
}
</style>