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的情況下,只能這么解決了~

轉載于:https://www.cnblogs.com/wenfangcao/p/10748801.html

總結

以上是生活随笔為你收集整理的微信小程序image bindload事件失效不触发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。