微信小程序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 ...
随机推荐
- Python学习之路基础篇--04Python基础+数据类型
1 int 只需知道 i.bit_length() 是算其二进制的位数, 如3 就是2: 5就是 3. 2 bool 要知道 while True == while 1 :除零以外的所有数都为真 ...
- Api文件
对于我们不认识的类(只限于java自带的类),我们可以百度去查一下,但是这样是嚼别人吃剩下的骨头,我们可以去查java的api文件,虽然都是英语,但是还是硬着头皮看吧,加油! 链接:https://p ...
- 前端导出功能get和post两种方式
get方式: var url = ’/sjdd/eventQuery/exportSuperviseEventExcel.do?beginDate=' + beginDate + '&endD ...
- NoSQL、memcached介绍、安装memcached、查看memcached状态
1.NoSQL 2.memcached介绍 3.安装memcached(二进制包安装) yum install -y memcached libmemcached libevent (若没有安 ...
- 学习笔记CB012: LSTM 简单实现、完整实现、torch、小说训练word2vec lstm机器人
真正掌握一种算法,最实际的方法,完全手写出来. LSTM(Long Short Tem Memory)特殊递归神经网络,神经元保存历史记忆,解决自然语言处理统计方法只能考虑最近n个词语而忽略更久前词语 ...
- 学习笔记TF053:循环神经网络,TensorFlow Model Zoo,强化学习,深度森林,深度学习艺术
循环神经网络.https://github.com/aymericdamien/TensorFlow-Examples/blob/master/examples/3_NeuralNetworks/re ...
- gdb 调试 python
gdb 版本 >7 的 对python调试有特别支持,参考: https://docs.python.org/devguide/gdb.html?highlight=gdb https://bl ...
- Linux第二节课学习笔记
虚拟机不一定要安装12版本,但仅有12版本支持RHCE模拟考试环境,激活码可以百度. 在创建新的虚拟机过程中,安装客户机操作系统时需要选择稍后安装操作系统,否则会默认最小化安装导致后面课上很多命令不能 ...
- oracle 的 exp 和imp命令
数据导出: 1 将数据库TEST完全导出,用户名gdoa 密码123 导出到D:\TEST_BK.dmp中 exp gdoa/123@TEST file=d:\TEST_BK.dmp full=y ...
- 服务器对接码云webhooks
服务安装git php代码(外网必须可以访问) <?php //本地路径滚adminasdfdasfasdf $file = "/wwwroot/webhooksLog.txt&quo ...