微信小程序之image图片自适应宽度比例显示
微信小程序的组件image是用来显示图片的,它有几个属性:
1、src 图片资源地址
2、mode 图片裁剪、缩放的模式
3、binderror 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: ‘something wrong’}
4、bindload 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:’图片高度px’, width:’图片宽度px’}
但是image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了,特别是我们在做一些商品详情页的时候,需要image自适应屏幕,按原图比例显示。那么如何让image自适应比例显示呢?可以有两种方法:
一、使用mode:widthFix
widthFix:宽度不变,高度自动变化,保持原图宽高比不变。
首先我们先设置image的mode为widthFix,然后给图片加一个固定rpx的宽度,比如:730rpx。
这样图片也可以自适应了。。因为小程序的rpx本身就是一个自适应显示的单位
二、使用bindload绑定函数动态自适应。
我们可以给image绑定一个函数,这个函数,如上面的bindload说明一样,我们可以获取到原图的宽度和高度。
然后计算他们的宽高比率。。然后设置一个宽度大小(rpx),最后通过style动态设置image的宽高。代码如下:
html代码:
<image src="{{ item }}" bindload="imageLoad" data-index="{{ index }}"
style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>
js代码:
Page({
data: {
images:{}
},
imageLoad: function(e) {
var $width=e.detail.width, //获取图片真实宽度
$height=e.detail.height,
ratio=$width/$height; //图片的真实宽高比例
var viewWidth=718, //设置图片显示宽度,左右留有16rpx边距
viewHeight=718/ratio; //计算的高度值
var image=this.data.images;
//将图片的datadata-index作为image对象的key,然后存储图片的宽高值
image[e.target.dataset.index]={
width:viewWidth,
height:viewHeight
}
this.setData({
images:image
})
}
})
最后,就可以通过images[index].width 和 images[index].height给每一个图片设置宽高了。
原文地址:http://www.qianduan8.com/1005.html
原文地址:https://www.cnblogs.com/jessie-xian/p/11571647.html
- 用scrapy爬虫抓取慕课网课程数据详细步骤
- 关于pl/sql中的绑定变量(r3笔记第73天)
- python爬取网易云音乐并分析:用户有什么样的音乐偏好?
- shell基础学习总结(二) (r3笔记第72天)
- 对IMP-00013问题的思考(r3笔记第71天)
- 搭建LSTM(深度学习模型)做文本情感分类的代码
- 【大牛经验】高吞吐低延迟Java应用的垃圾回收优化
- shell的图形化实现简单示例(r3笔记第70天)
- 关于查询转换的一些简单分析(三) (r3笔记第69天)
- 【大牛经验】Web服务器的工作原理
- 使用shell定制addm脚本(r3笔记第88天)
- 【专业技术第十三讲】指针和内存泄露
- 【Java案例】余弦函数
- MySQL数据类型(r3笔记第87天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法