在 el-scrollbar
中使用 el-image
懒加载,按照官方文档描述的,在不指定 scroll-container
的情况下,它会自动匹配最近一个 overflow
值为 auto
或 scroll
的父元素,信以为然的就没有管 scroll-container
的配置,结果……我把滚动条滚烂了应该懒加载的图片都没有加载出来!!!!!
以为是一个 bug ?换用 div
标签,设置为可滚动,应该懒加载的图片又是正常加载出来了……网上搜寻资料,木有盆友发表相关资料,好吧自己来吧……
官方文档描述,可以使用 scroll-container
指定监听 scroll
事件的容器,值类型为 string / HTMLElement
,然后就没有了,感觉描述的太简单了,也没有示例代码。HTMLElement
类型倒能理解是什么意思,但是 string
类型没有琢磨出来。那就给指定一个 HTMLElement
吧。
HTMLElement
指的是 DOM
对象,也就是说可以给 scroll-container
指定一个 overflow
值为 auto
或 scroll
的 DOM
对象。我们先分析一下 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-scrollbar
的 wrap
呢?我猜应该和 vue
的渲染有关吧,可能是 el-scrollbar
的 wrap
是在渲染过程中生成的,并没有直接体现在代码的字面量上面,所以渲染 el-image
的时候, el-image
不知道 el-scrollbar
有一个 overflow
值为 auto
或 scroll
的 wrap
子元素存在,我还没有专门研究过这渲染的过程,后面有时间再研究一下,看看我猜的对不对 _
网友评论