Vue + Element UI——滚动条el-scrollerbar和无限滚动指令v-infinite-scroll整合解决方案

基本概念

el-scrollbar：Element UI隐藏组件。

注意事项：

1.el-scrollbar的父层要有固定高度

2.el-scrollbar的高度要设成100%

3.如果出现横滚动条，添加overflow-x:hidden;

无限滚动指令v-infinite-scroll：滚动至底部时，加载更多数据。

官方文档

https://element.eleme.cn/#/zh-CN/component/infiniteScroll 

解决方案

<template>
          <el-scrollbar
            style="height: 100%"
            wrap-class="scrollbar-wrapper">
            <div
              class="infinite-list"
              v-infinite-scroll="load"
              infinite-scroll-delay="1000">
              <div v-for="i in count" class="infinite-list-item">{{ i }}</div>
            </div>
          </el-scrollbar>
</template>

<script>
  export default {
    name: "DEMO",
    data () {
      return {
        count: 0
      }
    },
    methods: {
      load () {
        this.count += 2
      }
    }
  }
</script>

<style>
  .scrollbar-wrapper {
    overflow-x: hidden !important;
  }
</style>

参考文章

https://shentuzhigang.blog.csdn.net/article/details/105150901

https://blog.csdn.net/qq_35630674/article/details/102610722