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

posted on 2019-04-22 10:43  文方草  阅读(1794)  评论(0编辑  收藏  举报