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

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

chantel186

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

阅读量3.8k

点赞数

分类专栏：微信公众号vue项目

本文链接：https://blog.csdn.net/qq_38859519/article/details/99645137

版权

本文介绍了如何使用Vue.js结合Vant组件库来实现页面的上拉刷新和下拉加载功能。通过示例的HTML和JavaScript逻辑代码，详细解析了相关实现过程，并提醒开发者在所有数据加载完成后，需为容器设置适当高度以确保正确显示第一页数据。

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

vue+vant下拉刷新，上拉加载

这是前段HTML代码：

<div class="item-box">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list 
          :finished="finished" 
          @load="onLoad" 
          v-model="loading"  
          finished-text="没有更多了"
         >
          <div class="conten-item" v-for="(item,index) in listData" :key="index">
            <div class="cont-left">
              <div class="content-left">
                <img src="../../assets/img/task.png">
              </div>
              <div class="conten-inner">
                <div class="inner-2">
                  <!-- {
  { item.integralType }} -->
                  {
  {item.integralType == 1 ?