微信小程序动态设置图片大小的方法


Posted in Javascript onNovember 21, 2019

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

效果如下图所示:

微信小程序动态设置图片大小的方法

总结

以上所述是小编给大家介绍的微信小程序动态设置图片大小的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
通过原生vue添加滚动加载更多功能
Nov 21 #Javascript
小程序api实现promise封装过程解析
Nov 21 #Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 #Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 #Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 #Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 #Javascript
webpack常用构建优化策略小结
Nov 21 #Javascript
You might like
无限级别菜单的实现
2006/10/09 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
php 文章采集正则代码
2009/12/28 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
javascript demo 基本技巧
2009/12/18 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python实现基本进制转换的方法
2015/07/11 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
行政文秘岗位职责范本
2014/02/10 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
公司给客户的感谢信
2015/01/23 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
电影建党伟业观后感
2015/06/01 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB