拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(6d8bc2-ua98).
重新安装浏览器，或使用别的浏览器我们都知道微信小程序的组件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：widthFixwidthFix：宽度不变，高度自动变化，保持原图宽高比不变。首先我们先设置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 }} height:{{ images[index].height }}"&&/image&
imageLoad: function(e) {
var $width=e.detail.width,
//获取图片真实宽度
$height=e.detail.height,
ratio=$width/$
//图片的真实宽高比例
var viewWidth=718,
//设置图片显示宽度，左右留有16rpx边距
viewHeight=718/
//计算的高度值
var image=this.data.
//将图片的datadata-index作为image对象的key,然后存储图片的宽高值
image[e.target.dataset.index]={
width:viewWidth,
height:viewHeight
this.setData({
images:image
最后，我们就可以可以通过images[index].width 和 images[index].height给每一个图片设置宽高了。以上是自己在玩小程序时，关于image自适应方法的简单记录。。
效果如下图所示：
原文地址：
阅读(...) 评论()微信小程序 Image组件实例详解
作者：顺子_RTFSC
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了微信小程序 Image组件实例详解的相关资料,需要的朋友可以参考下
image组件也是一个程序不可缺少的，可以这样说一个app中image组件随处可以看到，一般 image有两种加载方式第一种是网络图片第二种是本地图片资源，都用src属性去指定。
重点属性：
三种缩放模式
九种剪切方式
&!--3中是缩放模式
scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来
&view&aspectFit 保持纵横比缩放图片，只保证图片的短边能完全显示出来&/view&
&image style="width: 100%; height:100%" mode="aspectFit" src="../../image/image.jpg"/&
&!--9种是裁剪模式
top 不缩放图片，只显示图片的顶部区域
bottom,同上
bottom right
bottom left
&view&bottom 不缩放图片，只显示图片的底部区域&/view&
&image style="width: 100%; height: 100%" mode="bottom" src="../../image/image.jpg"/&
&view&left 不缩放图片，只显示图片的左边区域&/view&
&image style="width: 100%; height: 100%" mode="left" src="../../image/image.jpg"/&
&view&top right 不缩放图片，只显示图片的右上边区域&/view&
&image style="width: 100%; height: 100%" mode="top right" src="../../image/image.jpg"/&
相关文章：
&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具微信小程序 动态的设置图片的高度和宽度详解及实例代码
作者：预见才能遇见
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了微信小程序 动态的设置图片的高度和宽度详解及实例代码的相关资料,需要的朋友可以参考下
微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度
在小程序布局中，如果图片不是固定高度和高度，但image设置的是固定的高度和宽度，这时候原始图片相对image设置的固定高度和宽度不是等比例大小，那么这张图片就会变形，变的不清晰。这时就可以使用下面的等比例缩放的方式缩放图片，让图片不变形。或者通过image的bindload方法动态的获取图片的高度和宽度，动态的设置图片的高度和宽度，是图片布局的高度和宽度和原始图片的高度和宽度相等。
1.图片等比例缩放工具
class Util{
* 按照显示图片的宽等比例缩放得到显示图片的高
* @params originalWidth 原始图片的宽
* @params originalHeight 原始图片的高
* @params imageWidth
显示图片的宽，如果不传就使用屏幕的宽
* 返回图片的宽高对象
static imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){
let imageSize = {};
if(imageWidth){
imageSize.imageWidth = imageW
imageSize.imageHeight = (imageWidth * originalHeight) / originalW
}else{//如果没有传imageWidth,使用屏幕的宽
wx.getSystemInfo({
success: function (res) {
imageWidth = res.windowW
imageSize.imageWidth = imageW
imageSize.imageHeight = (imageWidth * originalHeight) / originalW
return imageS
* 按照显示图片的高等比例缩放得到显示图片的宽
* @params originalWidth 原始图片的宽
* @params originalHeight 原始图片的高
* @params imageHeight
显示图片的高，如果不传就使用屏幕的高
* 返回图片的宽高对象
static imageZoomWidthUtil(originalWidth,originalHeight,imageHeight){
let imageSize = {};
if(imageHeight){
imageSize.imageWidth = (imageHeight *originalWidth) / originalH
imageSize.imageHeight = imageH
}else{//如果没有传imageHeight,使用屏幕的高
wx.getSystemInfo({
success: function (res) {
imageHeight = res.windowH
imageSize.imageWidth = (imageHeight *originalWidth) / originalH
imageSize.imageHeight = imageH
return imageS
export default U
2.使用image组件加载图片，通过bindload动态的获取图片的高度和宽度，动态的设置图片的高度和宽度&& index.wxml& （../pro.png是本地图片）
&image bindload="imageLoad" style="width:{{imageWidth}};height:{{imageHeight}}" src="../pro.png"/&
import Util from '../common/Util';
imageWidth:0,
imageHeight:0
imageLoad: function (e) {
//获取图片的原始宽度和高度
let originalWidth = e.detail.
let originalHeight = e.detail.
//let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight);
//let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight,375);
let imageSize = Util.imageZoomWidthUtil(originalWidth,originalHeight,145);
this.setData({imageWidth:imageSize.imageWidth,imageHeight:imageSize.imageHeight});
微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具