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


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中用window.open()打开多个窗口的name问题
Mar 13 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 Javascript
通过原生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
PHP脚本的10个技巧(7)
2006/10/09 PHP
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
如何实现浏览器上的右键菜单
2006/07/10 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
javascript操作cookie
2017/01/17 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python isinstance判断对象类型
2008/09/06 Python
python和shell变量互相传递的几种方法
2013/11/20 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
python实现视频压缩功能
2020/12/18 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
公司庆典邀请函范文
2014/01/13 职场文书
《影子》教学反思
2014/02/21 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
地陪导游欢迎词
2015/01/26 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA