<swiper-item>
<image src="{{item.image}}" class="slide-image" mode="widthFix" @tap="bannerjump({{item.link}})" data-url="{{item.link}}" bindload="imageLoad" style="height:{{imgheights[swiperCurrent]}}rpx;width:{{imgwidth}}rpx;"/>
</swiper-item>
  // 获取banner图高度
imageLoad: function (e) {
var self = this;
//获取图片真实宽度
var imgwidth = e.detail.width,
imgheight = e.detail.height,
//宽高比
ratio = imgwidth / imgheight; //计算的高度值
var viewHeight = 750 / ratio;
var imgheight = viewHeight
var imgheights = this.data.imgheights
//把每一张图片的高度记录到数组里
imgheights.push(imgheight) this.imgheights = imgheights this.$apply();
},

最近发懒筋 不想说话 一句话都不想说 别怪我 用吧 ~~~~~

在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调。的更多相关文章

  1. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  2. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  3. 微信小程序之裁剪图片成圆形

    前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主 ...

  4. 微信小程序之base64图片如何预览与一键保存到本地相册?

    需求:由于后台服务器各方面的限制,现在服务器返回的图片是base64格式的,小程序端需要支持预览图片和多个图片一键下载功能 一.如何预览base64位图片? WXML页面:item.src的值是bas ...

  5. [入门到吐槽系列] 微信小程序 敏感违规图片检测 mediaCheckAsync,客服接口 消息推送 的各种坑分享!

    前言: 最近需要做个用户上传图片,服务端校验图片问题的需求.需要使用小程序消息推送,异步接受腾讯的图片验证回调.实在太多坑了. 相信10分钟看完本文的朋友,可以非常顺利避坑. 前期准备: 首先需要一个 ...

  6. 微信小程序开发之图片预览

    实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...

  7. 微信小程序——引入背景图片【六】

    前言 之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了! 框架使用的是美团的mpvue,我也是一边学习,一边写的,如有错误之处,还望大家指出. 在这里我有个问题,为什么微信 ...

  8. 微信小程序——网盘图片预览

    微信小程序图片预览提供了一个wx.previewImage接口,如下图: 现在我需要对网盘文件里的图片预览,但是网盘从后台返回的数据是各种类型的文件,如下图所示: 那么我们需要解决2个问题: 1.从这 ...

  9. 微信小程序添加背景图片的坑

    给微信小程序页面加载背景图片解决方案 直接附上原文地址: 给微信小程序页面加载背景图片解决方案 - YUSIR 完美CODING世界 - CSDN博客  https://blog.csdn.net/y ...

随机推荐

  1. Java 之 web服务器—Tomcat

    一.服务器 1.服务器 服务器:安装了服务器软件的计算机 2.服务器软件 服务器软件:接收用户的请求,处理请求,做出响应 3.Web 服务器软件 web 服务器软件:接收用户的请求,处理请求,做出响应 ...

  2. 离线安装zabbix文档

    为了离线安装需要离线安装包,可以通过这个方式获取. 用yum安装软件默认不保存软件包,要保存需修改配置文件 #  vi   /etc/yum.conf 将keepcache的值改为1 安装版本:rel ...

  3. thinkphp5中使用phpmailer实现发送邮件功能

    一.开启SMTP服务(使用php发送邮件需要用到SMTP服务,这里以163邮箱的SMTP服务为例). 1.登录163邮箱,在首页上找到“设置”. 2.选择开启的服务,一般都全选,POP3/SMTP/I ...

  4. vs2017开启JavaScript智能提示

    [工具]--[选项]--[文本编辑器]--[JavaScript]--[语言服务] 把第一个钩去掉即可,如果不需要提示就打上勾

  5. (在客户端)https抓包解密

    (一)原理分析 https的数据包是用对称秘钥(https协议协商出来的随机数)加密后的密文. 对称秘钥在传输线路上是密文的(被非对称加密过),但是在client.server端是明文的(因为要用于加 ...

  6. java线程的生命周期及五种基本状态

    一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较为经典的图: 上图中基本上囊括了Java中多线程各重要知识点.掌握了上图中的各知识点,Java中的多线程也就基本上掌 ...

  7. 【hadoop】在eclipse上运行WordCount的操作过程

    序:本以为今天花点时间将WordCount例子完全理解到,但高估自己了,更别说我只是在大学选修一学期的java,之后再也没碰过java语言了 总的来说,从宏观上能理解具体的程序思路,但具体到每个代码有 ...

  8. api markdown 编排模版

    #### 简要描述: - 查询城市编码 #### 接口版本: |版本号|制定人|制定日期|修订日期||:---- |:------ |:-------- |------- ||1.0 |XXX|201 ...

  9. python之编码与解码、is 与==的区别

    一.编码与解码 编码的过程其实就是采用一定的编码格式将unicode字符转换成str字符的过程 非ASCII码字符按字节为单位被编码成十六进制转义字符 解码采用的编码格式跟设置和环境有关 ascii ...

  10. CentOS7.x安装Java

    1.在甲骨文注册帐号下载需要版本的java的源码包 https://www.oracle.com/java/technologies/jdk12-downloads.html 2.把下载好的jdk的源 ...