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>

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM