在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调。
<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();
},
最近发懒筋 不想说话 一句话都不想说 别怪我 用吧 ~~~~~
在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调。的更多相关文章
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 微信小程序之裁剪图片成圆形
前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主 ...
- 微信小程序之base64图片如何预览与一键保存到本地相册?
需求:由于后台服务器各方面的限制,现在服务器返回的图片是base64格式的,小程序端需要支持预览图片和多个图片一键下载功能 一.如何预览base64位图片? WXML页面:item.src的值是bas ...
- [入门到吐槽系列] 微信小程序 敏感违规图片检测 mediaCheckAsync,客服接口 消息推送 的各种坑分享!
前言: 最近需要做个用户上传图片,服务端校验图片问题的需求.需要使用小程序消息推送,异步接受腾讯的图片验证回调.实在太多坑了. 相信10分钟看完本文的朋友,可以非常顺利避坑. 前期准备: 首先需要一个 ...
- 微信小程序开发之图片预览
实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...
- 微信小程序——引入背景图片【六】
前言 之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了! 框架使用的是美团的mpvue,我也是一边学习,一边写的,如有错误之处,还望大家指出. 在这里我有个问题,为什么微信 ...
- 微信小程序——网盘图片预览
微信小程序图片预览提供了一个wx.previewImage接口,如下图: 现在我需要对网盘文件里的图片预览,但是网盘从后台返回的数据是各种类型的文件,如下图所示: 那么我们需要解决2个问题: 1.从这 ...
- 微信小程序添加背景图片的坑
给微信小程序页面加载背景图片解决方案 直接附上原文地址: 给微信小程序页面加载背景图片解决方案 - YUSIR 完美CODING世界 - CSDN博客 https://blog.csdn.net/y ...
随机推荐
- VMware下载及安装(含破解码)永久使用
VMware(纽约证交所代码:VMW)在虚拟化和云计算基础架构领域处于全球领先地位,所提供的经客户验证的解决方案可通过降低复杂性以及更灵活.敏捷地交付服务来提高IT效率.VMware使企业可以采用能够 ...
- [C#]DataTable转string[]
来源:https://zhidao.baidu.com/question/1754089856824824548.html string[] ary = Array.ConvertAll<Dat ...
- (五)react-native开发系列之Android原生交互
react-native可以做web与原生的交互,这是使用react-native开发项目的主要目的之一,也是主要优势,用rn而不用原生交互则毫无价值,这篇文章用来记录在项目中rn的原生交互使用过程. ...
- SSH框架笔记01_SSH整合的两种方式
目录 1. 框架回顾 2. 创建项目,引入jar包 2.1 Struts2的jar包 2.2 Hibernate的jar包 2.3 Spring的jar包 3. 引入配置文件 3.1 Struts2配 ...
- web服务版智能语音对话
在前几篇的基础上,我们有了语音识别,语音合成,智能机器人,那么我们是不是可以创建一个可以实时对象的机器人了? 当然可以! 一,web版智能对话 前提:你得会flask和websocket 1 ,创建f ...
- linux kernel相关学习资料的收集与周边
<<linux内核设计与实现>>读了一遍.穿线作用比较好. 收获一个网站,和三本书 https://kernelnewbies.org/ https://book.douban ...
- 191016 Linux中安装python3
注意事项:直接在Linux系统中安装python3后会导致yum命令和pip命令失效. 安装python3过程(按下述方法安装依赖包.指定软链接,就不会出错了): # 安装依赖包 yum instal ...
- c++第四次作业
继承与派生--访问控制 一.知识要点 (一)知识回顾: 基类的成员可以有public.protected.private三种访问属性.基类的自身成员可以对基类中任何一个其他成员进行访问,但是通过基类的 ...
- word标题和序号列表的使用
- win10 64下anaconda4.2.0(python3.5)
python环境:win10 64下anaconda4.2.0(python3.5).安装tensorflow过程是在Anaconda Prompt中进行安装 1:打开Anaconda Prompt ...