Vue 无限滚动组件

infinite-scroll

前因

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

后果

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

使用方法

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

服务员~，上代码：

 <cm-infinite-scroll
      @scroll-to-bottom="onScrollToBottom">
      <ul>
        <li v-for="(news, index) in newsList" :key="index">
          <h2>{{news.title}}</h2>
          <p>{{news.content}}</p>
        </li>
      </ul>
    </cm-infinite-scroll>
    
<script>
    import CmInfiniteScroll from 'chaomeng-ui/CmInfiniteScroll'
    export default {
      name: 'infiniteScroll',
      components: {
        CmInfiniteScroll
      },
      data () {
        return {
          newsList: [
            { title: '新闻标题1', content: '内容1' },
            { title: '新闻标题2', content: '内容2' },
            { title: '新闻标题3', content: '内容3' },
            { title: '新闻标题4', content: '内容4' },
            { title: '新闻标题5', content: '内容5' }
          ]
        }
      },
      methods: {
        onScrollToBottom () {
          setTimeout(() => {
            this.newsList.push({
              title: `新闻标题${this.newsList.length + 1}`,
              content: `内容${this.newsList.length + 1}`
            })
          }, 1500)
        }
      }
    }
</script>
复制代码

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

?坑

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