用vant 实现上拉刷新下来加载

<template>
  <div class="home">
    <ul class="tabs">
      <li :class="curTab === item.tab ? 'active' : ''" @click="choseTab(item.tab)" v-for="item in tabs" :key="item.tab">{{item.name}}</li>
    </ul>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
      :offset="50"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.id" :title="item.title" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
const tabs = [{name: '全部', tab: 'all'}, {name: '精华', tab: 'good'}]
const curTab = ref('all')
let page = 0
// 下来初始为false
const refreshing = ref(false)
// 上来加载初始为false
const loading = ref(false)
const finished = ref(false)
const list = ref([])
const getTopics = async (type) => {
  // curTab.value 切换数据的tab  page 是页数
  let resut = await axios.get(`https://cnodejs.org/api/v1/topics?tab=${curTab.value}&page=${page}`)

  if(type == 'down') {
    // 如果下来刷新成功关闭下拉动画
    refreshing.value = false
    list.value = resut.data.data
  } else if(type === 'up') {
    // 如果上拉加载成功合并数据
    list.value = [...list.value, ...resut.data.data]
    // 刷新成功关闭加载动画
    loading.value = false
  }
 
}

const choseTab = (tab) => {
  curTab.value = tab
}
//调用封装的数据
getTopics()

// 下拉刷新成功page=1 页面到第一页 然后调用数据渲染
const onRefresh = () => {
  page = 1
  getTopics('down')
}
// 上拉加载等多成功page++ 增加页码
const onLoad = () => {
  page++
  getTopics('up')
}
</script>
<style lang="scss" scoped>
  .home {
    height: 100%;
    overflow: auto;
  }
  .tabs {
    display: flex;
    justify-content: space-around;
    height: 50px;
    align-items: center;
    .active {
      color: red;
    }
  }
</style>