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、效果

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐