Vue 无限滚动组件

infinite-scroll

前因

前段儿时间，公司内部做了个项目，原本的数据展示方式是table + pagination。本来感觉还不错，but 使用者觉得分页很不方便（没法看到表格最后一行和第二页第一行一块显示），后来想了想确实不方便。由此想到了滚动加载的方式。

后果

由于项目用的前端框架是Vue，所以就写了一个基于vue简单的滚动加载组件：CmInfiniteScroll

使用方法

只需要用该组件把要实现滚动加载的区域包裹起来即可。

服务员~，上代码：

 "onScrollToBottom">
      

        
"(news, index) in newsList" :key="index">
          
{{news.title}}
          
{{news.content}}
        
      
    
    

复制代码

当然还有更详细的用法，可以参考项目中的示例，再次就不过多说了。

?坑

一开始项目中用到了ElementUI的el-table作为内容的呈现方式，然后每次当我滚动到底部的时候，由于加载新数据的时候，滚动条不能自动向上滚动（el-table渲染新元素的方式导致），所以就会多次触发scroll-to-bottom事件，后来加上threshold也不好使。无奈只好用了原生的table元素。