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