element-ui的el-scrollbar和无限加载配合使用
el-scrollbar 是饿了么团队出的优化滚动条插件,配合无限加载需要注意以下事项:
1、<el-scrollbar></el-scrollbar> 的父标签必须设置高度
2、<el-scrollbar></el-scrollbar>包裹的<ul class="infinite-list"></ul>标签不要设置 overflow:auto 和 height
贴上代码:
<div class="wrapper" style="height: 500px;"> <el-scrollbar style="height:100%" ref="video_container"> <ul class="infinite-list" v-infinite-scroll="getVideoList" infinite-scroll-delay="500"> <li class="infinite-list-item" style="font-weight: bold;" v-for="i in 10"> <div class="id item">编号</div> <div class="title item" >视频标题</div> <div class="upload_time item">上传时间</div> <div class="video_format item">视频格式</div> <div class="time item">视频时长</div> <div class="distribution item">是否分发</div> <div class="operation item">操作</div> </li> </ul> </el-scrollbar> </div>
只要你不觉得尴尬,那尴尬的就是别人