VUE 实现下拉分页加载更多功能
<template><section class="dissection" id="dissection"><div class="wraper" v-if="!nodata"><ul class="disList"><li v-for="(item,index) in...
·
<template>
<section class="dissection" id="dissection">
<div class="wraper" v-if="!nodata">
<ul class="disList">
<li v-for="(item,index) in discuzData">
<img v-lazy="item.headUrl" class="namehead" alt="">
<h2>{{item.memberName}} <span>{{item.createTime.substring(0,10)}}</span></h2>
<div class="point"><span>评分</span>
<img :src="a" v-for="(a,i) in item.point" alt="">
</div>
<div class="note">{{item.evaluation}}</div>
<dl v-if="item.thumb.length>0">
<dd v-for="(a,i) in item.thumb"><img v-lazy="a" alt=""></dd>
</dl>
<div class="shop-reply" v-if="item.recoveryState==1">
商家回复:{{item.recoveryDesc}}
</div>
</li>
<li class="lastm" v-if="!isFinish"><load-more tip="加载更多"></load-more></li>
<li class="lastm isfinish" v-if="isFinish"><load-more :show-loading="false" tip="没有更多数据了"></load-more></li>
</ul>
</div>
<!-- 无内容 -->
<div class="nodata" v-if="nodata">
<p><img src="@/assets/images/shop/nodiscuz.png" alt=""></p>
<h3>暂无评价信息</h3>
</div>
</section>
</template>
<script>
import api from '@/api/api'
import http from '@/util/http'
import util from '@/util/util'
import star1 from '@/assets/images/shop/star3@3x.png'
import star2 from '@/assets/images/shop/star@3x.png'
export default {
data(){
return{
nodata:false, //有无数据
total:0, //评价总数
totalPages:0, //总页
discuzData:[], //评价列表
isLoad:false, //是否加载更多
isFinish:false,//是否加载完成
query:{
size:3,
current:1,
}
}
},
mounted(){
document.getElementById("dissection").addEventListener('scroll',this.discuzScroll);
this.getDiscuz();
},
methods:{
//下拉加载
discuzScroll(){
var dom = document.getElementById("dissection");
var scrollTop = dom.scrollTop;
var domHeight = dom.offsetHeight;
var scrollHeight = dom.scrollHeight;
var that = this;
if(scrollHeight >= scrollTop + domHeight && !this.isLoad && !this.isFinish){
that.isLoad = true;
setTimeout(function(){
that.getDiscuz();
},1000)
}
},
//获取评价
async getDiscuz(){
const json = await http.request(api.getShopDiscuz,"get",this.query);
if(json.data.returnCode==0){
this.total = json.data.result.total; //总数
this.totalPages = json.data.result.totalPages; //总页码
if(this.total==0){
this.nodata = true;
return false;
}
this.discuzData = this.discuzData.concat(json.data.result.rows);
if(this.query.current==this.totalPages){
this.isFinish = true;
}else{
this.isLoad = false;
this.query.current++;
}
}else{
this.isLoad = false;
this.$vux.toast.text(json.data.returnMsg);
}
},
}
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)