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的狀況下,只能這麼解決了~微信