话不多说,直接上代码
<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;"> </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>