WeChat 애플릿은 이미지 적응형 너비를 구현합니다.-미니 프로그램 개발-php.cn

WeChat 애플릿은 이미지 적응형 너비를 구현합니다.

小云云

풀어 주다： 2018-03-17 13:16:56

원래의

7026명이 탐색했습니다.

이 글은 주로 이미지 적응형 너비를 구현하는 WeChat 애플릿을 공유합니다. 먼저 이미지 구성 요소를 이해하겠습니다.

1. 이미지 구성 요소 이해

이미지에는 기본적으로 너비와 높이가 고정되어 있으므로 이미지를 조정하기가 어렵습니다. 함께 풀어봅시다

2. 방법

(1) 사용 모드: widthFix

widthFix: 너비는 그대로 유지되고 높이는 자동으로 변경되며 원본 이미지의 가로 세로 비율은 변경됩니다. 변함없이 유지됩니다.
먼저 이미지 모드를 widthFix로 설정한 다음 고정 rpx 너비를 이미지에 추가합니다(예: 730rpx).
이렇게 하면 사진을 조정할 수도 있습니다. . 미니 프로그램의 rpx 자체가 적응형 디스플레이 장치이기 때문입니다

(2).바인드로드 바인딩 기능을 사용하여 동적으로 적응하세요.
위의 바인드로드 설명처럼 이 함수를 사용하면 원본 이미지의 너비와 높이를 얻을 수 있습니다.
그런 다음 종횡비를 계산하세요. . 그런 다음 너비 크기(rpx)를 설정하고 마지막으로 스타일을 통해 이미지의 너비와 높이를 동적으로 설정합니다. 코드는 다음과 같습니다.

1..페이지 구조 쓰기index.wxml:

<image src="../uploads/2.jpg" bindload="imageLoad"
style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image>

로그인 후 복사

2.Set data index.js

//获取应用实例 
var app = getApp()
Page({
	data: {
		screenWidth: 0,
		screenHeight:0,
		imgwidth:0,
		imgheight:0,
	},
	onLoad: function() {
		var _this = this;
		wx.getSystemInfo({
			success: function(res) {
				_this.setData({
					screenHeight: res.windowHeight,
					screenWidth: res.windowWidth,
				});
			}
		});

	},
  	imageLoad: function(e) {
  		var _this=this;
		var $width=e.detail.width,    //获取图片真实宽度
		    $height=e.detail.height,
		    ratio=$width/$height;   //图片的真实宽高比例
		var viewWidth=500,           //设置图片显示宽度，
            viewHeight=500/ratio;    //计算的高度值   
		this.setData({
			imgwidth:viewWidth,
		    imgheight:viewHeight
		})
  	}
})

로그인 후 복사