很快微信开发者平台

 找回密码
 注册
查看: 1242|回复: 0

微信小程序实现image宽度比例自适应显示的解决方案

[复制链接]

30

主题

55

帖子

1075

积分

专家路上

积分
1075
 楼主| 发表于 2018-5-8 14:21:44 | 显示全部楼层 |阅读模式
微信小程序实现image宽度比例自适应显示的解决方案

一、了解image组件
2018116142454897.png

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

二、方法

(一)使用mode:widthFix

widthFix:宽度不变,高度自动变化,保持原图宽高比不变。

首先我们先设置image的mode为widthFix,然后给图片加一个固定rpx的宽度,比如:730rpx。

这样图片也可以自适应了。。因为小程序的rpx本身就是一个自适应显示的单位

(二)使用bindload绑定函数动态自适应

我们可以给image绑定一个函数,这个函数,如上面的bindload说明一样,我们可以获取到原图的宽度和高度。

然后计算他们的宽高比率。。然后设置一个宽度大小(rpx),最后通过style动态设置image的宽高。代码如下:

1. 编写页面结构index.wxml:
  1. <image src="../uploads/2.jpg" bindload="imageLoad"
  2. style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>
复制代码

2. 设置数据index.js
  1. //获取应用实例
  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.   imageLoad: function(e) {
  22.     var _this=this;
  23.     var $width=e.detail.width,  //获取图片真实宽度
  24.       $height=e.detail.height,
  25.       ratio=$width/$height;  //图片的真实宽高比例
  26.     var viewWidth=500,      //设置图片显示宽度,
  27.       viewHeight=500/ratio;  //计算的高度值
  28.     this.setData({
  29.       imgwidth:viewWidth,
  30.       imgheight:viewHeight
  31.     })
  32.   }
  33. })
复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋|很快微信开发者平台 ( 京ICP备2021022608号 )

GMT+8, 2021-12-2 23:25 , Processed in 0.028907 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表