基本概念

el-scrollbar：Element UI隱藏組件。

注意事項(xiàng)：

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

2.el-scrollbar的高度要設(shè)成100%

3.如果出現(xiàn)橫滾動(dòng)條，添加overflow-x:hidden;

無(wú)限滾動(dòng)指令v-infinite-scroll：滾動(dòng)至底部時(shí)，加載更多數(shù)據(jù)。

官方文檔

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。