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的情况下,只能这么解决了~