列表滑动至底部加载更多,效果如下:
Android下效果如期,在Ios下会出现在屏幕滑动时会多次触发scroll事件给后台发送请求,导致申请数据重复的问题, 解决方法是定义一个全局变量,每次申请数据时都去判断这个变量的值。
HTML:
<ul class="List">
<li v-for="(list,id) in listData" :key="id" @click="ToContent(list.orderid)">
<span>编号:{{list.orderid}}</span>
<video webkit-playsinline="true" playsinline="true" class="audioContent" :src="list..av" controls="controls"></video>
<img :src="list.thumb">
<h6>{{list.tpname}}</h6>
<p>票数:{{list.num}}</p>
<button class="bt01">查看详情</button>
</li>
</ul>
<div class="checkmore" v-show="checkmoreInfo">
<div class="" v-if="page < lastPage"><span>向下滑动加载更多</span></div>
<div class="" v-else><span>没有更多了</span></div>
</div>
JS:(通过loading变量来同时控制加载动画及ios的惯性加载)
//通过loading变量来同时控制加载动画及ios的惯性加载
data(){
return{
loading:true,//加载中动画是否显示及防止ios惯性加载的判断依据
checkmoreInfo:true,//是否显示下滑加载更多文字
listData:[],//列表数据
page:1,//当前页码
lastPage:"",//列表最后一页
listNum:8,//每页显示数量
}
},
mounted(){
//监听页面滚动
window.addEventListener('scroll',this.windowScroll,false);
},
methods:{
//滚动加载更多
windowScroll(){
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if(scrollTop + clientHeight >= scrollHeight && this.page <= this.lastPage && this.loading == false ){
this.loading = true;//在watch监听已经将loading变量改为flase,所以这里为true
this.getList();
}
},
//获取列表
getList(eventName){
......数据获取......
this.page = response.data.data.current_page + 1;
this.lastPage = response.data.data.last_page;
this.listData = this.listData.concat(response.data.data.data);
console.log("当前页:" + this.page + "最后一页:" + this.lastPage)
......数据获取......
},
},
watch:{
listData(){
var that = this;
this.$nextTick(() => {
that.loading = false; //数据变化时由true改为false加载中动画是否显示及防止ios惯性加载的判断依据
})
},
},
beforeDestroy(){
//离开时注销滚动监听
window.removeEventListener('scroll',this.windowScroll);
},