vant实现上拉加载，下拉刷新

最新推荐文章于 2024-07-03 13:45:59 发布

还有多远.

最新推荐文章于 2024-07-03 13:45:59 发布

阅读量2.1k

点赞数

文章标签： javascript vue.js 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_48309048/article/details/129306804

版权

该文章介绍了如何使用vant组件库在移动端项目中实现上拉刷新和下拉加载功能，提供了具体的vue模板代码示例，包括van-nav-bar、van-pull-refresh和van-list的使用方法，以及对应的上拉加载onLoad和下拉刷新onRefresh事件处理函数。

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

很多时候我们在做移动端时实现上拉刷新，下拉加载的时候用到一些逻辑处理，

我总结了一下使用vant实现的上拉刷新，下拉加载的功能，拿来就用，省时省力

<template>
  <div class="home-container">
    <van-nav-bar title="测试代码" fixed/>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled="finished">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ArticleInfo
          v-for="item in artList"
          :key="item.art_id"
          :title="item.title"
          :author="item.aut_name"
          :comm_count="item.comm_count"
          :pubdate="item.pubdate"
          :cover="item.cover"
        ></ArticleInfo>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleListAPI } from '@/api/articleAPI.js'
import ArticleInfo from '@/components/Article/ArticleInfo.vue'

export default {
  name: 'Home',
  components: {
    ArticleInfo
  },
  data() {
    return {
      page: 1,
      limit: 10,
      artList: [],
      loading: true,
      finished: false,
      refreshing: false
    }
  },
  created() {
    this.initArticleList()
  },
  methods: {
    async initArticleList(isRefresh) {
      const { data: res } = await getArticleListAPI(this.page, this.limit)
      if (isRefresh) {
        this.artList = [...res, ...this.artList]
        this.refreshing = false
      } else {
        // console.log(res)
        // this.artList = res
        this.artList = [...this.artList, ...res]
        this.loading = false
      }
      if (res.length === 0) {
        this.finished = true
      }
    },
    // 上拉加载处理函数
    onLoad() {
      this.page++
      // this.loading = true
      this.initArticleList()
    },
    // 下拉刷新处理函数
    onRefresh() {
      this.page++
      // this.refreshing = true
      this.initArticleList(true)
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  padding: 46px 0 50px;
  .van-nav-bar {
    background: #007bff;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
}
</style>

可以参考一下这个逻辑，vue3,react都是通的，自行觅食