1.先上代码javascript
<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事件在java
<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的状况下,只能这么解决了~微信