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>

 

 
posted @ 2020-09-04 16:12  渣男梦想  阅读(2305)  评论(0编辑  收藏  举报