elementUI无线滚动+监听滚动条触底
elementUI无线滚动、vue监听滚动条触底
·
场景
在这两天的开发任务中遇到了一个很奇葩的问题,并且它是偶发性的,大致情况是在某些电脑上,elementUI无线滚动总是正常执行的,但是在个别电脑上会出现偶发无线滚动不触发的情况,在经过大量的场景模拟下发现,出现无线滚动不触发的情况大致和渲染时间的长短有关(猜想,因为我确实没有模拟出必现的情况)。
解决方式
解决方式是以无线滚动作为主要的数据加载方式,同时判断如果无限滚动未触发,并且页面数据加载未完成,则使用滚动条触底事件作为备用数据加载方式。
代码实现
infinite-scroll-disabled:是否禁用
infinite-scroll-delay:节流时延
infinite-scroll-distance:触发加载的距离阈值
infinite-scroll-immediate:是否立即执行加载方法,以防初始状态下内容无法撑满容器。
// 滚动条在listArea上
<div ref="listArea">
<div v-infinite-scroll="queryList"
:infinite-scroll-delay="10"
infinite-scroll-distance="300"
:infinite-scroll-immediate="'false'"
:infinite-scroll-disabled="loading||allLoaded||requestFail">
<div v-for="(item, index) in tableList">
{{item:index}}
</div>
<div>
</div>
mounted () {
// 必须使用nextTick获取DOM,否则你可能拿不到它
this.$nextTick(()=>{
this.$refs.listArea.addEventListener('scroll',this.handleScroll,true);
});
},
beforeDestroy () {
// 所有的监听事件、定时器等必须在页面卸载后进行移除,否则可能会造成不可预知的错误,如:内存泄漏
// 移除监听事件
this.$refs.listArea.removeEventListener('scroll', this.handleScroll);
},
methods:{
handleScroll (e){
//滚动条滚动时,距离顶部的距离
const scrollTop = e.target.scrollTop;
//可视区的高度
const windowHeight = e.target.clientHeight;
//滚动条的总高度
const scrollHeight = e.target.scrollHeight;
//滚动条到底部的条件
if(scrollTop+windowHeight===scrollHeight){
// 判断数据是否加载完成、是否正在加载
if (!this.allLoaded && !this.loading){
// 获取数据方法
// 在请求数据方法中,将loading修改为true,防止重复触发
// 在情书数据结束后,将loading修改为false
// 在所有数据请求完成后,将allLoaded修改为true
this.queryList();
}
}
},
}
问题
页面存在其他滚动条时,其他滚动条触底也会触发数据请求方法
解决方法:将监听事件绑定到你需要触发滚动条触底的div上,而不是绑定在window上,代码就不贴了,没啥大变化。
更多推荐
已为社区贡献13条内容
所有评论(0)