element 隐藏组件 el-scrollerbar 使用方法详细解说 带无限滚动 适配不同的浏览器

1、

首先从上述路径可以看见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

 

2、从文件看看怎么引入

 

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

 

4、必备元素

（1）外层定高的div

（2）el-scrollbar height设为100%

（3）可以通过

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

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

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

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

(记得判断到最后一页的时候不要再执行loadMore不然会无限发送新请求)

 

4、效果