微信小程序image bindload事件失效不觸發

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

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

相關文章
相關標籤/搜索