vantH5基础使用

列表分页刷新

• 上拉分页
• 下拉刷新

<script setup>
import { ref,onBeforeMount } from 'vue';
import {getListByPageApi} from '@/api/tixian'

// 是否正在刷新
const refreshing = ref(false);
//是否加载完成
const finished = ref(false)
//是否loading
const loading = ref(false);
//当前页
const currentPage = ref(1);
//当前页大小
const pageSize = ref(10);
//总数据
const list = ref([]);

onBeforeMount(() => {

})

//上拉加载列表
function onLoadNextPage() {
  loading.value = true;
  getListByPageApi({
    currentPage: currentPage.value,
    pageSize: pageSize.value}
  ).then(res => {
    refreshing.value = false;
    currentPage.value++
    loading.value = false;
    //拼接数据
    list.value =  [...list.value, ...res.data.rows];
    if (list.value.length >= res.data.total){
      finished.value = true
    }
  })
}

// 下拉刷新
const onRefresh = () => {
  // 重置状态
  finished.value = false;
  loading.value = true;

  // 重置页码并请求数据
  currentPage.value = 1;

  getListByPageApi({
    currentPage: currentPage.value,
    pageSize: pageSize.value}
  ).then(res => {
    refreshing.value = false;
    currentPage.value++
    loading.value = false;
    //拼接数据
    list.value =  res.data.rows;
    if (list.value.length >= res.data.total){
      finished.value = true
    }
  })
}
</script>


<template>
  <!-- 下拉刷新容器 -->
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <!-- 上拉加载列表 -->
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoadNextPage"
    >
      <div v-for="(item,index) in list" :key="index" class="main">
         
      </div>
    </van-list>
  </van-pull-refresh>
</template>