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

bf91b32cb06c49ee56bcf071f41e7941.png

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

79a1d9d952b008e1ac8734a1f5257ddb.png

2、从文件看看怎么引入

a424c454a0865a73757dfe46adc438d3.png

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

7e989dde4f7313f8136de7c77b000b01.png

22b7f90a935b3f8f72c206a3d3d64fdf.png

4、必备元素

d9951ad8140c7c1c78115c9c49aecb5d.png

(1)外层定高的div

(2)el-scrollbar height设为100%

70c64d8fc88c751359f51802742f367b.png

3)可以通过

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

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

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

(4)通过无限滚动组件设置无限滚动(见vue文档)The world's most popular Vue UI framework

70d3eb56edb5c829d09c8a77a8a0a638.png

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

4、效果

c4ffb0998353d67e94a9b80a72be7564.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值