element 隐藏组件 el-scrollerbar 使用方法详细解说 带无限滚动

时间:2024-04-05 10:19:05

1、element 隐藏组件 el-scrollerbar 使用方法详细解说 带无限滚动

首先从上述路径可以看见scrollbar这个组件是存在的

渲染出来层级

*el-scrollbar(下面是自动渲染出来的不需要写在代码里)

     *el-scrollbar__wrap

         *el-scollbar__view

         *el-scollbar__bar is-horizontal

              *el-scollbar__thunmb

         *el-scollbar__bar is-vertical

              *el-scollbar__thunmb

element 隐藏组件 el-scrollerbar 使用方法详细解说 带无限滚动

 

2、从文件看看怎么引入

element 隐藏组件 el-scrollerbar 使用方法详细解说 带无限滚动

 

3、将组件引入要使用的文件中

element 隐藏组件 el-scrollerbar 使用方法详细解说 带无限滚动

element 隐藏组件 el-scrollerbar 使用方法详细解说 带无限滚动

 

4、必备元素

element 隐藏组件 el-scrollerbar 使用方法详细解说 带无限滚动

(1)外层定高的div

(2)el-scrollbar height设为100%

element 隐藏组件 el-scrollerbar 使用方法详细解说 带无限滚动

(3)可以通过

el-scrollbar 内的el-scrollbar__wrap的 隐藏水平/垂直的滚动条

overflow-x:hidden; //隐藏水平滚动条

overflow-y:hidden; //隐藏垂直滚动条

(4)通过无限滚动组件设置无限滚动(见vue文档)https://element.eleme.cn/#/zh-CN/component/infiniteScroll

element 隐藏组件 el-scrollerbar 使用方法详细解说 带无限滚动

 

4、效果

element 隐藏组件 el-scrollerbar 使用方法详细解说 带无限滚动