Vue列表滚动底部加载更多及Scroll在IOS下兼容问题导致数据重复的解决

列表滑动至底部加载更多,效果如下:

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);
}, 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值