H5app上滑加载/触底加载数据

        做h5app会经常用到这种加载方式，今天记录一下具体的实现方式：

话不多说开始展示

这个加载中用的vant组件Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)

         先说一下需求，页面滑动到底部之后显示加载中，然后发起请求拿到第二页数据push到原来的data数组中，加载中组件隐藏，然后渲染数据。

首先给需要滚动的div添加滚动事件（别忘了给div设置 overflow：scroll; 和 height:100%; ）

 然后获取滚动到底部的距离

loadMore(event){
    this.scrollTop = event.target.scrollTop; //获取滚动高度可以做详情页回滚使用
	//这里scrollBottom(距离底部距离)=scrollHeight(盒子总高度) - scrollTop(滚动高度) -clientHeight(盒子内部高度)
 	const scrollBottom =event.target.scrollHeight -event.target.scrollTop - event.target.clientHeight;
    //total(总数据条数) pageNum(数据页) pageSize(每页数据条数)
    if (this.total > this.pageNum * this.pageSize) {
        //scrollBottom距离底部小于或等于30的时候就开始获取第二页数据
        if(scrollBottom <= 30){
            //使页数加一然后在请求数据
            this.pageNum += 1;
            //获取数据时使用的是push所以每次都会把新一页的数据添加到数组里面
            this.getData();
        }
    }else{
       console.log("没有更多数据了")
    }
}

在这里添加一下修改一下

上面加载是可行的但是有时滑到底部之后会触发多次请求

clickconut:0,
starTime:0

//添加这些,0.3秒的时候只执行一次
var currentTime = new Date().getTime()
if(currentTime - this.starTime > 300){
    this.clickconut = 0
    this.starTime = currentTime 
}
this.clickconut++
if(this.clickconut == 1){
    this.pageNum += 1
    this.getData()
}

这样就可以完美解决了。