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


    话不多说,直接上代码

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

    js

    <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>
  • 相关阅读:
    用于Transformer的6种注意力的数学原理和代码实现
    假设检验中的第一类错误和第二类错误
    2022 年 4 月 10篇 ML 研究论文推荐
    高斯朴素贝叶斯分类的原理解释和手写代码实现
    SQL 必知必会 50 题(1 5)
    那些年,我们一起做过的 Java 课后练习题(71 75)
    【UWP】实现一个波浪进度条
    springboot源码(八)
    springboot源码(五)
    springboot源码(一)
  • 原文地址:https://www.cnblogs.com/xuchangqi1/p/9628872.html
Copyright © 2020-2023  润新知