微信小程序image bindload事件失效不触发

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248096.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据可视化(BI报表的开发)第三天

20、销售统计-布局 html结构&#xff1a; <!-- 销售额 --><div class"sales panel"><div class"inner"><div class"caption"><h3>销售额统计</h3><a href"javascript:;" class"active&q…

软件开发工具(第1章:绪论)

一、 软件开发工具的由来 计算机语言和软件开发工具的发展和历史 机器语言&#xff08;第一代语言&#xff09;&#xff1a;难以记忆的、无意义的、二进 制的字符串 汇编语言&#xff08;第二代语言&#xff09;针对难以记忆的、无意义的、二进 制的字符串、人们试图用英语中具…

Swift傻傻分不清楚系列(一)常量与变量

菜鸟从零开始认识学习Swift。感谢大神们翻译的文档。搬到自己小黑屋里慢慢看~~~ 本页包含内容&#xff1a; 常量和变量声明常量和变量类型标注常量和变量的命名输出常量和变量注释分号 Swift 是一门开发 iOS, OS X 和 watchOS 应用的新语言。然而&#xff0c;如果你有 C 或者 …

Saiku Table展示数据合并bug修复(二十五)

Saiku Table展示数据合并bug修复 Saiku以table的形式展示数据&#xff0c;如果点击了 非空的字段 按钮&#xff0c;则会自动进行数据合并&#xff0c;为空的数据行以及数据列都会自动隐藏掉。 首先我们应该定位问题&#xff1a; 1.查看接口返回值&#xff0c;会发现接口返回都正…

软件开发工具(第2章:软件开发过程及其组织)

一、软件开发的困难 程序员做好软件工作的关键是什么&#xff1f; 关键是两个转换&#xff1a; 第一个转换是用户对软件功能的理解与程序员对软件功能的理解之间的转换。 &#xff08;不同⾏业的⼈员对于事物的认识⽅法与描述⽅法是不同的。&#xff09; 第二个转换要解决的是人…

数据可视化(BI报表的开发)第四天

练习题&#xff1a; 先找出字符串 ‘8587263747153203552943982’ 中出现次数最多的数字及次数&#xff0c;然后去重后并排序&#xff08;不准使用sort&#xff09;&#xff0c;使得到结果为 ‘0123456789’。 要求1&#xff1a;找到出现最多的数字和出现的次数 // 1、找出出…

Swift傻傻分不清楚系列(二)数据类型

本页包含内容&#xff1a; 整数整数范围IntUInt浮点数类型安全和类型推断数值型字面量数值型类型转换整数转换数整数和浮点数转换类型别名布尔值 整数 整数就是没有小数部分的数字&#xff0c;比如42和-23。整数可以是有符号&#xff08;正、负、零&#xff09;或者无符号&…

Python打卡第四周

这一周鸽了好久&#xff0c; 因为最近在准备比赛。课程一直没跟上。。。 今天整理完本周的知识之后休息一周复习之前的 好了。 上总结 第一天 装饰器定义函数bar&#xff0c;在foo中调用 # def foo(): # # print(in the foo) # # bar() # # foo()def bar():print(in th…

网络经济与企业管理(第 1 章:企业管理概论)

一、企业的概念 什么是企业&#xff1f; 1.企业以市场为导向&#xff0c;以价值增值作为经济活动的目的 2.企业是从事商品生产和流通的经济组织 3.企业经营过程中要自主经营、自负盈亏、独立核算和承担风险&#xff0c;具有法人资格的基本经济单位 企业发展的三个时期&#xff…

js高级 — ES6

ECMAScript 6 目标&#xff1a;学习完 ES6 可以掌握方便后续的开发&#xff0c;未来工作中大量使用 ES6 开发 ECMAScript 6 介绍ECMAScript 6 新增语法内置对象的扩展ECMAScript 6 降级处理&#xff08;学习完node再讲&#xff09; 1. ECMAScript 6 介绍 ES – ECMAScript …

Swift傻傻分不清楚系列(三)元组与可选类型

本页包含内容&#xff1a; 元组可选nilif 语句以及强制解析可选绑定隐式解析可选类型错误处理断言 元组 元组&#xff08;tuples&#xff09;把多个值组合成一个复合值。元组内的值可以是任意类型&#xff0c;并不要求是相同类型。 下面这个例子中&#xff0c;(404, "Not…

去死吧!USB转串口!!!

首先&#xff0c;这个题目有两种歧义&#xff1a;1、USB转232串口&#xff08;严格说就是这种&#xff09;&#xff01; 2、USB转USART串口&#xff08;通常都是这么叫&#xff0c;认为就是这&#xff0c;理论上是错误的&#xff0c;歧义所在&#xff09;&#xff01; USB转TTL…

IDEA微服务项目的application.yml没有绿色叶子的解决办法

1.今天在写微服务项目的时候成功入坑&#xff0c;那么问题是啥呢&#xff1f;接下来和我一起走入bug的世界吧&#xff0c;让我们看看究竟是怎么回事。 *问题描述    1.application.yml是灰色的小格子 2.实在难看 *需要解决的最终结果 1.有绿色的小叶子 解决方案上图 1. 2. …

Ajax — 第一天

上网的目的 本质目的&#xff1a;浏览和消费资源 资源&#xff1a;文字、图片、音频、视频…资源存在哪里&#xff1a;服务器上 服务器的概念 是负责存放和对外提供资源的电脑。它的性能比普通的计算机好太多了 客户端 获取和消费资源的电脑&#xff0c;叫做客户端。 我…

linux 查看进程

1.ps 各字段含义 如果让程序始终在后台执行&#xff0c;即使关闭当前的终端也执行&#xff08;之前的&做不到&#xff09;&#xff0c;这时候需要nohup。 该命令可以在你退出帐户/关闭终端之后继续运行相应的进程。关闭中断后&#xff0c;在另一个终端jobs已经无法看到后台…

Swift傻傻分不清楚系列(四)基本运算符 o_O!???

本页包含内容&#xff1a; 术语赋值运算符算术运算符组合赋值运算符比较运算符三目运算符空合运算符区间运算符逻辑运算符 运算符是检查、改变、合并值的特殊符号或短语。例如&#xff0c;加号&#xff08;&#xff09;将两个数相加&#xff08;如 let i 1 2&#xff09;。更…

网络经济与企业管理(第 2 章:企业战略管理)

一、战略的性质与类型 什么是战略&#xff1a;企业发展的谋划 企业战略的三个层次&#xff1a; 企业总体战略&#xff1a;又称经营战略&#xff0c;是企业整体运营的指导思想事业层战略&#xff1a;又称竞争战略、业务层次战略、SBU战略&#xff0c; 指导具体战略经营单位。职能…

Ajax — 图书管理

注意&#xff1a;本项目基于 jQuery 文件下进行的 Ajax 请求项目&#xff0c;需要映入jQuery文件&#xff01; <body style"padding: 15px;"><!-- 添加图书的Panel面板 --><div class"panel panel-primary"><div class"panel-h…

vue动态加载组件

vue动态加载组件&#xff0c;可以使用以下方式 <component :is"propertyname" v-for"tab in tabs"></component> :is必须是指向data里面的变量&#xff0c;如果使用is"proname"&#xff0c;那么is指向的名称&#xff0c;必须在compo…

Swift傻傻分不清楚系列(五) 字符串和字符

本页包含内容&#xff1a; 字符串字面量初始化空字符串字符串可变性字符串是值类型使用字符连接字符串和字符字符串插值Unicode计算字符数量访问和修改字符串比较字符串字符串的 Unicode 表示形式 String是例如"hello, world"&#xff0c;"albatross"这样…