vue中下拉刷新

最新推荐文章于 2024-08-22 16:22:42 发布

又菜又不想学的小张

最新推荐文章于 2024-08-22 16:22:42 发布

阅读量837

点赞数

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

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

版权

vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vant

3 篇文章 0 订阅

订阅专栏

<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <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>
  </van-pull-refresh>
</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
})
const refreshing = ref(false)
onMounted(() => {
})
const onLoad = () => {
  // 下拉刷新核心代码
  if (refreshing.value) {
    list1.page=1
    list1.listData = []
    refreshing.value = false;
  }
  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 onRefresh = () => {
  // 清空列表数据
  vantList.finished = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  vantList.loading = true;
  onLoad();
};
const { listData } = toRefs(list1)
const { loading, finished } = toRefs(vantList)
</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>