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


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 相关文章推荐
jquery ajax请求实例深入解析
Nov 26 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
domReady的实现案例
Nov 23 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
vue-router 中 meta的用法详解
Nov 01 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 解决session死锁的方法
2013/06/20 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
Python时间戳使用和相互转换详解
2017/12/11 Python
Django数据库表反向生成实例解析
2018/02/06 Python
Python @property原理解析和用法实例
2020/02/11 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
Python实现播放和录制声音的功能
2020/08/12 Python
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
国际会议邀请函范文
2014/01/16 职场文书
《童年》教学反思
2014/02/18 职场文书
环境日宣传活动总结
2014/07/09 职场文书
最美家庭活动方案
2014/08/31 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
先进人物事迹材料
2014/12/29 职场文书
给客户的感谢信
2015/01/21 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
MongoDB数据库的安装步骤
2021/06/18 MongoDB
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python