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的情況下,只能這么解決了~