基本概念

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-scrollbarstyle="height: 100%"wrap-class="scrollbar-wrapper"><divclass="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

總結

以上是生活随笔為你收集整理的Vue + Element UI——滚动条el-scrollerbar和无限滚动指令v-infinite-scroll整合解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。