折翼天使资源社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 12|回复: 0

[文档教程] 微信小程序实现图片自适应的方法

[复制链接]

6981

主题

7363

帖子

285

积分

网站编辑

Rank: 8Rank: 8

天使之心
0
注册时间
2013-8-22
发表于 2018-11-23 11:22:32 | 显示全部楼层 |阅读模式
1、html代码
  1. [/code][i]复制代码[/i]
  2. 2、js代码
  3. [code]Page({
  4. data: {
  5. images:{}
  6. },
  7. imageLoad: function(e) {
  8. var $width=e.detail.width, //获取图片真实宽度
  9. $height=e.detail.height,
  10. ratio=$width/$height; //图片的真实宽高比例
  11. var viewWidth=718, //设置图片显示宽度,左右留有16rpx边距
  12. viewHeight=718/ratio; //计算的高度值
  13. var image=this.data.images;
  14. //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
  15. image[e.target.dataset.index]={
  16. width:viewWidth,
  17. height:viewHeight
  18. }
  19. this.setData({
  20. images:image
  21. })
  22. }
  23. })
复制代码
复制代码
实现效果图:
fd26505ac10a47169b4a6749f7240d88.png