微信小程序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 ...
随机推荐
- Cartographer安装
安装过程: 官方安装教程: https://google-cartographer-ros.readthedocs.io/en/latest/index.html # Install wstool a ...
- hightcharts详细教程
1.初始化highcharts var chart = Highcharts.chart('container', options); 2.options 自定义图表的配置项 const option ...
- vue 监听手机键盘是否弹出及input是否聚焦成功
//定义移动端类型 function pageStats() { let u = navigator.userAgent, app = navigator.appVersion; let obj = ...
- C语言-第3次作业得分
作业链接:https://edu.cnblogs.com/campus/hljkj/CS201801/homework/2359 作业链接:https://edu.cnblogs.com/campus ...
- tp3.2 D 和 M 的区别
ThinkPHP 中M方法和D方法都用于实例化一个模型类,M方法 用于高效实例化一个基础模型类,而 D方法 用于实例化一个用户定义模型类. 使用M方法 如果是如下情况,请考虑使用 M方法: 对数据表进 ...
- vue day5 分页控件 更新 PagedList.mvc 仿
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- auto-encoder小记
1.使用auto-encoder生成手写数字 2.中间code层使用二维向量,使用L2norm处理中间层数据 3.从[-1,1]的矩形框中等间隔选取100个坐标点 作为code值 最终生成图像 后期应 ...
- 2018-2019-2 20165313 Exp2 后门原理与实践
实践基础问题回答 (1)例举你能想到的一个后门进入到你系统中的可能方式? 应用程序设定后门,用户安装后,后门就可以进入.例如课堂上讲到的百度. (2)例举你知道的后门如何启动起来(win及linux) ...
- 加密算法HASH和MD5模块hsahlib
HASH Hash,一般翻译做"散列",也有直接音译为"哈希"的,就是把任意长度的输入(又叫做预映射,pre-image),通过散列算法,变换成固定长度的输出, ...
- vue2-通过axios实现数据请求
1.通过axios实现数据请求 vue.js默认没有提供ajax功能 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascr ...