在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调。
<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 ...
随机推荐
- rabbitmq使用教程
检查RabbitMQ运行状态1)打开命令行命令行,进入RabbitMQ的安装目录: cd D:\installs\rabbitmq\rabbitmq_server-3.7.15\sbin2)输入 ra ...
- OO——UML解析
目录 第四单元博客作业 一.前两次作业架构设计 1. 第一次作业 2. 第二次作业 二.架构设计以及对OO方法理解的演进 1. 表达式求导 2. 多线程电梯 3. 地铁线路查询 4. UML图的解析 ...
- kubernetes第五章--创建资源的两种方式
- vue+ElementUI+高德API地址模糊搜索(自定义UI组件)
开发环境描述: Vue.js ElementUI 高德地图API 需求描述: 在新增地址信息的时候,我们需要根据input输入的关键字调用地图的输入提示API,获取到返回的数据,并根据这些数据生成下拉 ...
- Imagetragick RCE(CVE-2016–3714)复现
CVE-2016–3714: 闲着没事突然想起这个洞来,借用vulhub复现一下 poc有很多:https://github.com/ImageTragick/PoCs 我用的 push graphi ...
- 虹软人脸识别SDK在网络摄像头中的实际应用
目前在人脸识别领域中,网络摄像头的使用很普遍,但接入网络摄像头和人脸识别SDK有一定门槛,在此篇中介绍过虹软人脸识别SDK的接入流程,本文着重介绍网络摄像头获取视频流并处理的流程(红色框内),以下内容 ...
- MySQL中使用函数时,与后面括号不能之间不能根空格
修改前代码: select MAX (article_order) from mall_school_article where 1=1 and is_deleted = 0 and status = ...
- 【HICP Gauss】数据库 数据库管理(调优 启动流程)-4
数据库参数: 创建数据库 调优数据库 其他---->控制资源使用 控制数据库内部机制 设置重要属性 参数数据保存在cfg/Zengine.ini 文件中 参数保存使用 key=value的保存形 ...
- K-D树详解
K-D树最近邻算法https://blog.csdn.net/image_fzx/article/details/80624968 一般说来,索引结构中相似性查询有两种基本的方式: 一种是范围查询,范 ...
- k8s安装之node-autoapprove-certificate-server.yaml
kubelet证书分为server和client两种, k8s 1.9默认启用了client证书的自动轮换,但server证书自动轮换需要用户开启.方法是: 2.1 增加 kubelet 参数(现已默 ...