我们都知道微信小程序的组件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给每一个图片设置宽高了。

效果如下图所示:

  

【微信小程序】动态设置图片大小的更多相关文章

  1. 微信小程序——动态设置swiper的高度

    根据小程序的设定,swiper组件默认高度为150px,无法根据内容来撑高.如果里面的内容固定还好说,直接设置一个高度就可以了.要是里面内容是动态变化的,这个特性使得我们使用这个组件的时候感到诸多不便 ...

  2. 微信小程序-动态设置背景色navigationBarBackgroundColor的值

    查看API: wx.setNavigationBarColor(OBJECT) 代码: wx.setNavigationBarColor({ frontColor: '#ffffff', // 必写项 ...

  3. 微信小程序 - 动态背景图片实现

    很简单-就两步 wxml(遍历style的background-image路径即可) wxss(.ab)

  4. 微信小程序动态生成保存二维码

    起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...

  5. 微信小程序wxss设置样式

    微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...

  6. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  7. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  8. 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法

    微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法 具体情况: scroll-view 滚动,设置 display:flex 不生效并警告设置 enable-fl ...

  9. 微信小程序----wxss设置样式

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

随机推荐

  1. Junit4模板

    模板 MallApplicationTests import org.junit.runner.RunWith; import org.springframework.boot.test.contex ...

  2. SAP MM MB5L 报表里的差异金额如何调整?

    SAP MM MB5L 报表里的差异金额如何调整? 5月3号,收到财务顾问提出的一个问题,说是MB5L报表里有差异. 如下查询条件, 报表结果里显示有差异, 经查,导致这个差异的原因之一是,一些物料批 ...

  3. AFNetworking遇到错误 Request failed: unacceptable content-type: text/html

    iOS 使用AFNetworking遇到错误 Request failed: unacceptable content-type: text/html 原因: 不可接受的内容类型 “text/html ...

  4. 中文代码之Django官方入门:建立模型

    参考编写你的第一个 Django 应用,第 2 部分 创建项目后,首先用中文命名应用: $ python3 manage.py startapp 投票 之后在models.py建立模型,其他各种相关配 ...

  5. split("\\,")引起的java.lang.ArrayIndexOutOfBoundsException异常解决方案

    由split("\,")引起的指标越界异常 如果字符串最后分隔符里的字段为空,使用split("\\,")进行切割时,最后的空字段不会切割 例如"a, ...

  6. sleep() 和 wait() 有什么区别:

      ①原理不同. ​ sleep()方法是Thread类的静态方法,是线程用来控制自身流程的,它会使此线程暂停执行一段时间,而把执行机会让给其他线程,等到计时时间一到,此线程会自动苏醒.而wait() ...

  7. .net core从版本 3.0 迁移到 3.1引发的BUG

    前几天微软的.net core3.1发布后,随把visual studio 2019升级到16.4.1版本并把项目进行框架升级.升级后的项目在IdentityServer4授权后在360安全浏览器竟然 ...

  8. 免密码登录postgresql

    如果在当前shell 下,如果设定 export PGPASSWORD='postgres密码' 环境变量,可以不用每次执行sql 语句或者导入一个sql 文件都输入一次密码的麻烦了.

  9. Python 修饰符@用法

    def funA(desA): print("It's funA") def funB(desB): print(desB( )) print("It's funB&qu ...

  10. 03-flex-wrap是否换行

     flex-wrap:运用到父元素上 结合 display: flex; flex-wrap: wrap; 换行 flex-wrap: nowrap; 不换行 #main { width: 300px ...