1.1 功能描述
利用element-ui框架实现照片墙功能显示多张图片，并使用懒加载提高网页首次加载性能，每次滚动条下拉到图片底部加载一张图片，直至满足相应页面需要显示的数量。
2.1 主要考点
2.1.1 运用组件
- elment-ui组件的懒加载lazy的运用。（提高首次加载页面的效率）参考官方文档：图片懒加载
- elment-ui组件的InfiniteScroll无限加载的运用。（每次下拉加载一张图片）参考官方文档： InfiniteScroll无限加载
2.2.1 基本思路
- 滚动容器需要固定宽度与高度，再者overflow:auto；需要设置滚动条,图片标签添加lazy属性值，当滚动下一图片时加载图片，这样可以提高页面的首次加载速度;
- 当进度条滚动到底部时，触发v-infinite-scroll中的load方法。
- load方法中，底部打开加载的显示，当图片添加到urls的json数组中时，再隐藏加载的显示。
- 滚动进度条继续触发v-infinite-scroll
- 当需要限制加载图片数量，使用infinite-scroll-disabled中的disabled。
- computed来侦听数据属性disabled是否为ture，判断两个条件：1）this.loading是否为true（需要加载图片状态） 2）noMore是否为true（数量是否超过10）
3.1 踩到的坑
- 问题1：初步添加图片懒加载代码，图片没有滚动效果。
- 回答1：再次查看官方文档，要在上级node节点添加overflew:auto;才可以实现滚动。
——————————— - 问题2：为什么在无限加载中，infinite-scroll-disabled的变量disabled，需要放在computed中？
- 回答2：computed是用来监听一个属性受多个属性影响，即现在disabled需要受到loading以及图片json数组的长度两种属性影响。外加watch是用来监听一组数据影响多个数据，后期需要对这两个生命周期进行进一步的探讨以及学习。
4.1 相应框架或语言
- 语言：html,js,css
- 框架：elemnet-ui,vue 2.0
5.1 相关代码
<template>
<div class="stylebg">
4/2
<div class="swiperView" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
<el-image class="pic" v-for="(item,index) in urls" :key="index" :src="item.url" lazy></el-image>
<div v-if="loading" class="textView">
<img class="loadingIcon" src="@/assets/loadingGif.gif"></img>
</div>
<p v-if="noMore" class="textView">没有更多了</p>
</div>
</div>
</template>
<script>
export default {
data(){
return{
loading: false,
urls: [
{
id:1,
url:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
},
{
id:2,
url:'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
},
{
id:3,
url:'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg'
},
{
id:4,
url:'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
},
{
id:5,
url:'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
},
{
id:6,
url:'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
},
{
id:7,
url:'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
}
]
}
},
mounted(){
},
computed: {
noMore () {
return this.urls.length >= 10
},
disabled () {
return this.loading || this.noMore
}
},
methods: {
load () {
this.loading = true
//使用定时器给图片对象末尾添加一张图片
setTimeout(() => {
this.urls.push({
url:'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
})
this.loading = false
}, 2000)
}
}
}
</script>
<style lang="less" scoped>
.swiperView{
height: 500px;
overflow:auto;
.pic{
width:100%;
}
}
.textView{
width:100%;
text-align: center;
.loadingIcon{
width: 50px;
height: 50px;
}
}
</style>
6.1 运行截图
观察右边控制台当当第10张图是在滚动条最底部时，dom上div内部的image标签是隐藏的。当下拉到第10张图片的时候可以看到，dom上动态添加了image标签，同时完成了页面渲染。到第7张再次滚动的时候，通过定时器给图片对象数组最后一位添加一张图片，延时两秒后显示。
