微信小程序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事件在
<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的情况下,只能这么解决了~
微信小程序image bindload事件失效不触发的更多相关文章
- 微信小程序开发 [03] 事件、数据绑定和传递
1.事件绑定 在微信小程序中,事件的绑定依附于组件,当事件触发时,就会执行事件对应的处理函数. 我们回到前几章中的例子,将index页面调整为首页(app.json中调整pages数组元素的顺序),此 ...
- 微信小程序中的事件绑定
前言: 微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的. js代码: // 页面级的js文件必须调用Page函数来注册页面, / ...
- 微信小程序--阻止冒泡事件
微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...
- 微信小程序的bindtap事件
在微信小程序中,要想获取元素的属性值,需要用到 bindtap事件,如果想要正确获取到属性值,对属性的命名还有一定要求 如下是正确的方式data-money-Num="9.93": ...
- 微信小程序CheckBox选中事件
1.微信小程CheckBox选中问题 <checkbox-group bindchange="checkboxChange" data-index="{{index ...
- 微信小程序——获取绑定事件元素的ID
小程序list数据带值跳转,一般直接通过设置item的id来标识或者通过设置键值data-xxxx的方式标识.如下图所示: 解析出来的结果如下图: 我们看到它在元素上绑定了一个checkSchoolL ...
- 微信小程序 - bindtap等事件传参
什么是事件事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, ...
- 微信小程序navigator跳转失效
在编写小程序时遇到一个问题:使用 <navigator url='/pages/lists/index'>...</navigator>进行跳转没有反应.控制台也没有报错,ap ...
- 微信小程序 input使用letter-spacing失效问题
根据ui设计稿, 本来思路是一个input搞定,下面的线使用背景图 background:url('/images/line.png')no-repeat bottom center; 然后使用let ...
随机推荐
- 【Effective Java读书笔记】创建和销毁对象(一):考虑使用静态工厂方法代替构造器
类可以提供一个静态方法,返回类的一个静态实例,如Boolean包装类的一个获取实例的静态方法 public static Boolean valueOf(boolean b) { return (b ...
- flutter 添加插件
打開pubspec.yaml ---> cupertino_icons 下添加插件
- 20155219付颖卓《网络对抗》EXP7网络欺诈技术防范
实验后回答问题 1.通常在什么场景下容易受到DNS spoof攻击 在公共共享网络里,并且同一网段可以ping通的网络非常容易被攻击. 2.在日常生活工作中如何防范以上两攻击方法 不在不信任的公开网络 ...
- 使用Angular cli创建组件报错: Unexpected token / in JSON at position....
之前为了熟悉流程一直都是手动创建组件,今天试着用cli创建组件,居然报错了,报错大致为: Unexpected token / in JSON at position.... ,并且错误指向了.ang ...
- 1.YAF 的安装
1.环境 UBUNTU16.04 PHP7.0 2.安装 2.1先安装PHPIZE sudo apt install php7.0-dev 2.2 A;下载源码包 并解压 安装 sudo w ...
- PTA1
1-1 数组定义中,数组名后是用方括号括起来的常量表达式,不能用圆括号. (1分) [T ] F 1-2 在C语言中能逐个地使用下标变量,也能一次引用整个数组. (1分) T [F]因为它有首地址 1 ...
- 如何打开kernel最开始的打印
1.Kernel hacking ---> Kernel low-level debugging functions --> Early printk 2.boot option中你 ...
- cf352E Jeff and Brackets dp+矩阵快速幂(加法+min运算)
题意大致是这样的,一共要放 m 段括号序列,每一段放 n 个括号,也就是放 n*m个括号,再每一段中的 n 个位置分别有放左括号和右括号的代价,问最终摆放出合法的括号序列的最小代价是多少. 另外保证, ...
- Mac使用
安装you-get: 用到mac下安装软件的工具:brew 百度搜brew到官网首页照说明在终端执行一段指令 安装方法:命令行输入 /usr/bin/ruby -e "$(curl -fsS ...
- C#知识点汇总
核心技术课程 编程基础强化练习.面向过程编程(变量.if.for.while.函数.类型转换.枚举 .数组.重载.值类型.引用类型.ref.out.字符串).面向对象编程(类.继承 .接口.异常.索引 ...