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


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学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
node.js中npm包管理工具用法分析
Feb 14 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懒人函数 自动添加数据
2011/06/28 PHP
php 如何获取数组第一个值
2013/08/06 PHP
PHP正则验证Email的方法
2015/06/15 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中str.join()简单用法示例
2018/03/20 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
一篇.NET面试题
2014/09/29 面试题
大学生毕业求职的自我评价
2013/09/29 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
求职推荐信范文
2013/12/01 职场文书
班长竞选演讲稿
2014/04/24 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
win sever 2022如何占用操作主机角色
2022/06/25 Servers