美文网首页Web 前端
解决在el-scrollbar中使用el-image懒加载不生效

解决在el-scrollbar中使用el-image懒加载不生效

作者: 时光觅迹 | 来源:发表于2021-04-08 09:40 被阅读0次

    el-scrollbar 中使用 el-image 懒加载,按照官方文档描述的,在不指定 scroll-container 的情况下,它会自动匹配最近一个 overflow 值为 autoscroll 的父元素,信以为然的就没有管 scroll-container 的配置,结果……我把滚动条滚烂了应该懒加载的图片都没有加载出来!!!!!

    以为是一个 bug ?换用 div 标签,设置为可滚动,应该懒加载的图片又是正常加载出来了……网上搜寻资料,木有盆友发表相关资料,好吧自己来吧……

    官方文档描述,可以使用 scroll-container 指定监听 scroll 事件的容器,值类型为 string / HTMLElement ,然后就没有了,感觉描述的太简单了,也没有示例代码。HTMLElement 类型倒能理解是什么意思,但是 string 类型没有琢磨出来。那就给指定一个 HTMLElement 吧。

    HTMLElement 指的是 DOM 对象,也就是说可以给 scroll-container 指定一个 overflow 值为 autoscrollDOM 对象。我们先分析一下 el-scrollbar (如果你已经了解它的结构,就当我没说这句话),它是由最外层组件层(el-scrollbar)、内容包裹容器(wrap)、水平/垂直滚动条组成,内容溢出需要滚动就发生在内容包裹容器上面,所以我们要给 scroll-container 指定的 HTMLElement 应该就是它了,让我们试试吧。

    文档结构

    <template>
      <el-scrollbar ref="el_scrollbar" style="height: 100%">
        <el-image
          v-for="(item, index) in photoList"
          :key="index"
          :src="item.imgsrc"
          fit="cover"
          lazy
          :scroll-container="scrollContainer"
        ></el-image>
      </el-scrollbar>
    </template>
    
    <script>
    export default {
      name: "ArticleList",
      data() {
        return {
          photoList: [
            { imgsrc: "...", text: "..." }
          ],
          scrollContainer: HTMLElement
        };
      },
      mounted() {
        this.scrollContainer = this.$refs.el_scrollbar.wrap;  // 将 el-scrollbar 的 wrap 对象找出来,指定给 scroll-container 
      }
    }
    

    最后实验一下,成功了。但是为什么 scroll-container 没有能自动匹配到 el-scrollbarwrap 呢?我猜应该和 vue 的渲染有关吧,可能是 el-scrollbarwrap 是在渲染过程中生成的,并没有直接体现在代码的字面量上面,所以渲染 el-image 的时候, el-image 不知道 el-scrollbar 有一个 overflow 值为 autoscrollwrap 子元素存在,我还没有专门研究过这渲染的过程,后面有时间再研究一下,看看我猜的对不对 _

    相关文章

      网友评论

        本文标题:解决在el-scrollbar中使用el-image懒加载不生效

        本文链接:https://www.haomeiwen.com/subject/nfyukltx.html