1.先上代码
<template><div :class="['img-wrapper', className]"><img :src="defaultSrc" :mode="mode" class="default-img" :hidden="loaded"><img :src="src" :mode="mode" @load="loaded = true" lazy-load></div>
</template>
<script>
export default {props: {src: String,mode: String,className: String},data () {return {defaultSrc: '/static/images/load.png',loaded: false}}
}
</script>
<style scoped lang="less">
.img-wrapper {position: relative;img {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;border-radius: 4px;&.default-img {z-index: 2;}}
}
</style>
占位图组件, 但是这里出现了一个bug,bindload事件在
onPullDownRefresh时并不会重新渲染触发, 这是一个微信的bug.导致下拉刷新时, 存在图片出不来的情况.
<template><div :class="['img-wrapper', className]"><img :src="defaultSrc" :mode="mode" class="default-img" :hidden="isRefresh || loaded"><img :src="src" :mode="mode" @load="loaded = true" lazy-load></div>
</template>
<script>
export default {props: {src: String,mode: String,className: String,isRefresh: Boolean},data () {return {defaultSrc: '/static/images/load.png',loaded: false}}
}
</script>
加入 isRefresh的判断, 如果是下拉刷新的时候,取消占位图.在微信没有修复这个bug的情况下,只能这么解决了~