天天看點

element 隐藏元件 el-scrollerbar 使用方法詳細解說 帶無限滾動 适配不同的浏覽器

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 使用方法詳細解說 帶無限滾動 适配不同的浏覽器

(記得判斷到最後一頁的時候不要再執行loadMore不然會無限發送新請求)

4、效果

element 隐藏元件 el-scrollerbar 使用方法詳細解說 帶無限滾動 适配不同的浏覽器