vantui的上拉加载及下拉刷新的使用示例

最新推荐文章于 2023-12-06 15:49:40 发布

loop.fu

最新推荐文章于 2023-12-06 15:49:40 发布

阅读量1.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_21683643/article/details/101529714

版权

本文介绍了如何在Vue项目中使用VantUI实现上拉加载和下拉刷新功能，通过在main.js中引入相关组件，并在TestPageList.vue页面进行配置和展示。

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

main.js中引入：

import { PullRefresh} from 'vant'
Vue.use(PullRefresh)
import { NavBar } from 'vant';
Vue.use(NavBar);
import { Cell, CellGroup } from 'vant';
Vue.use(Cell).use(CellGroup);

新建TestPageList.vue

<template>
  <div>
    <van-nav-bar
      fixed
      title="数据列表"
      right-text="退出登录"
    />
    <div class="list-content" id="list-content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
          :offset="10"
        >
          <div class="list-item">
            <van-cell v-for="item in list" :key="item" :title="item + ''" />
          </di