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


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 相关文章推荐
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
js 调用百度分享功能
Feb 27 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
Vue实现计算器计算效果
Aug 17 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 更新数据库中断的解决方法
2009/06/05 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
python打包多类型文件的操作方法
2020/09/21 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
执行总经理岗位职责
2014/02/03 职场文书
狼和鹿教学反思
2014/02/05 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书