微信小程序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 ...
随机推荐
- ubuntu下编译小知识点
#改变编译器选项 SET(CMAKE_C_COMPILER"g++") #出现如下错误:添加C++11特性 #error: #error This file requires co ...
- linux文本处理命令
linux文本处理命令 1.wc命令 基本介绍 文件的行统计.字符统计.字节统计 基本语法 wc [OPTION]... [FILE]... wc [OPTION]... --files0-f ...
- 装了anaconda之后如何设置anaconda、python环境变量
装了anaconda之后如何设置anaconda.python环境变量 1.装了anaconda之后如何设置anaconda环境变量 参考 https://www.cnblogs.com/avivi/ ...
- 2018.9.12 B树总结
1. B-Tree B-树是一种平衡的多路查找树,它在文件系统中很有用. 1.1 B-Tree 特性 关键字集合分布在整颗树中: 任何一个关键字出现且只出现在一个结点中: 搜索有可能在非叶子结点结束: ...
- 单线拨号上网时RouterOS内网端口映射的配置
很多时候routeros 是通过单线拨号上网,假设PPP接口名为pppoe-out1 若需要添加内网ip=18.16.1.92主机的3389端口映射 ,可以在命令行键入: ip firewall na ...
- web Function函数
javascript中函数定义 js中函数一般定义如下: function functionName(arg0,arg1,arg2,...,argN) { statements;}其中function ...
- 思科模拟器-使用vlan划分子网
此博客为初始化版本,未经完善,后续我再整理一下 小技巧:有时候我们不小心执行了一条错误命令,可以尝试使用在该命令前加一个no进行撤销 首先说一下网络设备的选择 在该实验中我主要用到一台三层交换机(思科 ...
- Docker切换国内镜像
本人是Ubuntu系统 Ubuntu 18.04 安装 Docker-ce 1.更换国内软件源,推荐中国科技大学的源,稳定速度快(可选) sudo cp /etc/apt/sources.list / ...
- 学习3DES加密算法笔记
3DES(或称为Triple DES)是三重数据加密算法(TDEA,Triple Data Encryption Algorithm)块密码的通称.它相当于是对每个数据块应用三次DES加密算法.由于计 ...
- 手写SpringMVC实现
设计自己的MVC架构 1.读取配置通过web.xml中加载我们自己写的MyDispatcherServlet和读取配置文件. 2.初始化九大组件只需实现基本的:1).加载配置文件:2).扫描用户配置包 ...