• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序image宽高自适应

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一.了解image组件

由于image有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了。下面就来一起解决下


二.方法

(一).使用mode:widthFix

widthFix:宽度不变,高度自动变化,保持原图宽高比不变。
首先我们先设置image的mode为widthFix,然后给图片加一个固定rpx的宽度,比如:730rpx。
这样图片也可以自适应了。。因为小程序的rpx本身就是一个自适应显示的单位


(二).使用bindload绑定函数动态自适应。
我们可以给image绑定一个函数,这个函数,如上面的bindload说明一样,我们可以获取到原图的宽度和高度。
然后计算他们的宽高比率。。然后设置一个宽度大小(rpx),最后通过style动态设置image的宽高。代码如下:

1..编写页面结构index.wxml:

[html] view plain copy
  1. <span style="font-family:'Comic Sans MS';font-size:18px;color:#333333;"><image src="../uploads/2.jpg" bindload="imageLoad"  
  2. style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image></span>  
2.设置数据index.js
[html] view plain copy
  1. <span style="font-family:'Comic Sans MS';font-size:18px;color:#333333;">//获取应用实例   
  2. var app = getApp()  
  3. Page({  
  4.     data: {  
  5.         screenWidth: 0,  
  6.         screenHeight:0,  
  7.         imgwidth:0,  
  8.         imgheight:0,  
  9.     },  
  10.     onLoad: function() {  
  11.         var _this = this;  
  12.         wx.getSystemInfo({  
  13.             success: function(res) {  
  14.                 _this.setData({  
  15.                     screenHeight: res.windowHeight,  
  16.                     screenWidth: res.windowWidth,  
  17.                 });  
  18.             }  
  19.         });  
  20.   
  21.     },  
  22.     imageLoad: function(e) {  
  23.         var _this=this;  
  24.         var $width=e.detail.width,    //获取图片真实宽度  
  25.             $height=e.detail.height,  
  26.             ratio=$width/$height;   //图片的真实宽高比例  
  27.         var viewWidth=500,           //设置图片显示宽度,  
  28.             viewHeight=500/ratio;    //计算的高度值     
  29.         this.setData({  
  30.             imgwidth:viewWidth,  
  31.             imgheight:viewHeight  
  32.         })  
  33.     }  
  34. })</span>  

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序模板template使用介绍发布时间:2022-07-18
下一篇:
这个以一抵多的美食小程序,你或许能用到发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap