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. VirtualBox安装Archlinux并配置桌面环境

    最近无聊,就找来archlinux来玩一玩,去archlinux wiki上看了一下教程.以下是操作过程. 1. 下载镜像,下载地址; 2. 启动archlinux并选择Boot Arch Linux ...

  2. flume实现kafka到hdfs测试用例

    kafka 到hdfs at1.sources =st1 at1.channels = ct1 at1.sinks = kt1 # For each one of the sources, the t ...

  3. Leetcode 两数之和 (散列表)

    给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, 15], target ...

  4. Pong 打乒乓

    发售年份 1972 发售平台 多平台 开发商 雅达利(Atari) 类型 体育休闲 https://www.youtube.com/watch?v=fiShX2pTz9A

  5. haproxy反向代理

    haproxy是个高性能的tcp和http的反向代理.它就是个代理.不像nginx还做web服务器 官网地址为www.haproxy.org nginx的优点和缺点 优点: 1.web服务器,应用比较 ...

  6. Taro 生命周期

    Taro 新加的生命周期 说明 网址 componentDidShow() 在此生命周期中通过 this.$router.params,可以访问到程序初始化参数 https://nervjs.gith ...

  7. Flink

    1. Flink表接受是基于dataset.datastream的:首先需要注册一个dataset,然后通过sql去查询这个dataset,返回的即使基于dataset查询结果,这个查询结构就是Fli ...

  8. 多次ajax请求数据json出错

    问题描述: 1.对象数据存放在session中,每次从session中取数据 2.jsp初始化完毕调用ajax请求,返回的数据格式出错(返回部分数据,即丢失了部分数据) 解决方案:

  9. H3C交换机IRF典型配置举例LACP MAD检测方式

    一.组网需求 由于公司人员激增,接入层交换机提供的端口数目已经不能满足PC的接入需求.现需要在保护现有投资的基础上扩展端口接入数量,并要求网络易管理.易维护. 二.组网图 三.配置思路 Device ...

  10. mpt2sas0: log_info(0x31120100): originator(PL), code(0x12), sub_code(0x0100)及同类问题的追踪

    做存储或者磁盘阵列的经常会遇到linux kernel打印如下信息或者类似的信息,这是什么原因导致的呢? mpt2sas0: log_info(0x31120100): originator(PL), ...