在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调。
<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 ...
随机推荐
- “proxy” in package.json must be a string 解决办法
今天学习一个react项目.想从本地服务器获取数据. 直接axios.get('http://localhost:80/api/react/header.json'),报错跨域. 网上查了下,需要在p ...
- Docker安装与部署
安装Docker: 查看你当前的内核版本: uname -r 更新yum包: sudo yum update 卸载旧版本(如果安装过旧版本的话): sudo yum remove docker doc ...
- 【Flask】 python学习第一章 - 3.0 正则转换和错误捕捉
3.1正则转换器定义 Class RegexConverter(BaseConverter): regex = "[0-9]{6}" app.url_map.converters[ ...
- 【HICP Gauss】数据库 环境的搭建 -1
1.安装规则 1.主机名必须网络唯一 2.主机名必须两位数以上 可以中划线 不能下划线 3.固定IP地址 4.端口号 1888 新增账户 omm 用户组 dbgrp ,家目录 /home/ ...
- Kali下进行局域网断网攻击
今天我就来演示一下在kali下的局域网断网攻击,即ARP地址欺骗,下图所要用到的arp地址欺骗状态图: 则: 第一步:假设主机A访问某网站,那么要告知某网站我的IP和MAC地址,但这是以广播的方式告知 ...
- 本地安装部署Jira
https://blog.csdn.net/u013492736/article/details/83315650 1. 首先在官网下自行搭建服务器的版本,有适合于windows的,也有linux版本 ...
- django-ContentType的简单使用
ContentType 一般我们有多张表同时外键关联同一张表的时候,可以考虑使用ContentType models.py from django.db import models from djan ...
- codevs 1341 与3和5无关的数
题目描述 Description 有一正整数a,如果它能被x整除,或者它的十进制表示法中某位上的数字为x,则称a与x相关.现求所有小于等于n的与3或5无关的正整数的平方和. 输入描述 Input De ...
- jmeter生成html报告详解
Jmeter Dashboard详解 结果面板主要分为Dashboard和Charts两部分.Dashboard对信息进行汇总展示,Charts展示更多详细指标数据. Dashboard Test a ...
- ER图的构建
我们在完成一个项目前期,首要的工作是对需求进行分析,然后根据需求画出相应的数据库E-R图,这是我们后期建立数据库和对数据库进行操作的必要操作 这是一个小总结和示例 关系型数据库 关系 (表) stud ...