vue 使用v-infinite-scroll实现滚动加载

最新推荐文章于 2023-07-12 14:31:35 发布

原创最新推荐文章于 2023-07-12 14:31:35 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#python #vue #js #javascript #filter

本文详细介绍了如何在 Vue 项目中利用 v-infinite-scroll 指令实现滚动加载功能，通过示例代码展示了具体的实现步骤，帮助开发者提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，直接上代码

<div  class="paryInfo" v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10"
          immediate-check="false" ><!-- 解决自动调用多次问题 -->
        <table class="parycontent">
          <tr>
            <th style="width:80px;">&nbsp;</th>
            <th style="width:118px;">name</th>
            <th style="width:110px;">content</th>
            <th>pary</th>
          </tr>
          <tr v-for="item,index in articleData" :key="index">
            <td style="width:80px;">
              <img :src="item.user.fullProfileUrl" width="50px" height="50px" align="top"/>
            </td>
            <td style="width:118px;">
              <span class="name">{{item.user.userName}}</br>
              <span>{{item.buyTime|formatDate}}</span></span>
            </td>
            <td style="width:110px;">
              <span class="sayToYou">{{item.sayToYou}}</span>
            </td>
            <td>
              <span class="shop">{{item.hallName}}</span>
            </td>
          </tr>
</div>

　<div v-if="!endFlag">loading....</div>

<script>
  import { app_visitRecord } from '@/service/getData';
  import { formatDate } from "@/utils/date"; //转换日期格式
  export default {
    //过滤器
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    }
  },
    data() {
      return {
        params: {
          Type: 0,
          pageSize: 14,
          pageIndex: 1
        },
        loading: false,　　
        endFlag: false,
        articleData: [],  //存放数据
      };
    },

    methods: {
      loadMore(){
        this.getParyData(this.params);
        return;
      },

      getParyData(params){//获取信息
        this.loading = true;//请求数据的开关
        app_visitRecord({
          'type':params.Type,
          'maxPageSize':params.pageSize,
          'startPageNo':params.pageIndex,
        }).then((response)=>{
          if(response.stateCode == 200){
            this.articleData = this.articleData.concat(response.datas.data);
          }
          ++this.params.pageIndex;
           //判断最后一页是否有数据
          if (response.datas.data.length <  this.params.pageSize) {
            this.loading = true; /*终止请求*/
            this.endFlag = true;
          } else {
            this.loading = false; /*继续请求*/
          }

        }).catch(err=>{
           console.log(err);
           this.loading = true; /*终止请求*/
           this.endFlag = true;
        });
      }
    },

    mounted: function () {this.getParyData(this.params);
    }
  }

</script>