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的情况下,只能这么解决了~

微信小程序image bindload事件失效不触发的更多相关文章

  1. 微信小程序开发 [03] 事件、数据绑定和传递

    1.事件绑定 在微信小程序中,事件的绑定依附于组件,当事件触发时,就会执行事件对应的处理函数. 我们回到前几章中的例子,将index页面调整为首页(app.json中调整pages数组元素的顺序),此 ...

  2. 微信小程序中的事件绑定

    前言: 微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的. js代码: // 页面级的js文件必须调用Page函数来注册页面, / ...

  3. 微信小程序--阻止冒泡事件

    微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...

  4. 微信小程序的bindtap事件

    在微信小程序中,要想获取元素的属性值,需要用到 bindtap事件,如果想要正确获取到属性值,对属性的命名还有一定要求 如下是正确的方式data-money-Num="9.93": ...

  5. 微信小程序CheckBox选中事件

    1.微信小程CheckBox选中问题 <checkbox-group bindchange="checkboxChange" data-index="{{index ...

  6. 微信小程序——获取绑定事件元素的ID

    小程序list数据带值跳转,一般直接通过设置item的id来标识或者通过设置键值data-xxxx的方式标识.如下图所示: 解析出来的结果如下图: 我们看到它在元素上绑定了一个checkSchoolL ...

  7. 微信小程序 - bindtap等事件传参

    什么是事件事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, ...

  8. 微信小程序navigator跳转失效

    在编写小程序时遇到一个问题:使用 <navigator url='/pages/lists/index'>...</navigator>进行跳转没有反应.控制台也没有报错,ap ...

  9. 微信小程序 input使用letter-spacing失效问题

    根据ui设计稿, 本来思路是一个input搞定,下面的线使用背景图 background:url('/images/line.png')no-repeat bottom center; 然后使用let ...

随机推荐

  1. MATLAB 进行五种边缘检测

    自定义函数: function []=edge_detect(image_name) a=imread(image_name); I=rgb2gray(a); BW1=edge(I,'Roberts' ...

  2. react+umi+dva+antd中dva的数据流图解

  3. for循环、while循环、break、continue、exit

    1. for循环 语法:for 变量名 in 条件; do …; done案例1 #!/bin/bashsum=0for i in `seq 1 100`do# echo "$sum + $ ...

  4. 报文 HTTP HTTPS

    报文是网络中交换与传输的数据单元,即站点一次性要发送的数据块.报文包含了将要发送的完整的数据信息,其长短很不一致,长度不限且可变. 报文也是网络传输的单位,传输过程中会不断的封装成分组.包.帧来传输, ...

  5. fillder抓包工具详解

    https://www.cnblogs.com/yyhh/p/5140852.html

  6. H3C_IRF_BFD配置

    IRF典型配置举例(BFD MAD检测方式)1. 组网需求 由于网络规模迅速扩大,当前中心交换机(Device A)转发能力已经不能满足需求,现需要在保护现有投资的基础上将网络转发能力提高一倍,并要求 ...

  7. flume安装配置

    1 下载安装包并解压 下载地址:http://flume.apache.org/download.html 解压:tar zxvf apache-flume-1.8.0-bin.tar.gz 2 配置 ...

  8. BUAA-OO第二单元小结

    一.设计策略 三次作业中,由于前两次作业都只有一部电梯,因此我的线程只有两个,一个等待队列输入进程,以及一个电梯运行进程.等待队列输入进程实现十分简单,只需要根据输入把request添加到等待队列即可 ...

  9. vim的学习

    vi和vim的关系: vim是vi发展而来的. 2.vim的三种模式: 1>.命令模式 -- 打开文件后,默认进入命令模式. 2>.编辑模式 -- 需要输入一些命令,切换到编辑模式. 3& ...

  10. ZZFAFA_BilibiliMusic_DownUrl

    OneDrive_DownFileUrl: FHProductionHK-BGM:https://1drv.ms/f/s!Ajs97XY1QSQ8cPXo36h4AK9XG7k CABAL&A ...