场景
在这两天的开发任务中遇到了一个很奇葩的问题,并且它是偶发性的,大致情况是在某些电脑上,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">