elementUI无线滚动+监听滚动条触底

场景

        在这两天的开发任务中遇到了一个很奇葩的问题，并且它是偶发性的，大致情况是在某些电脑上，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上，代码就不贴了，没啥大变化。