WeChat 애플릿은 이미지 구성 요소 이미지 적응형 너비 비율 예시 공유를 구현합니다.-미니 프로그램 개발-php.cn

WeChat 애플릿은 이미지 구성 요소 이미지 적응형 너비 비율 예시 공유를 구현합니다.

小云云

풀어 주다： 2018-01-17 16:52:53

원래의

3272명이 탐색했습니다.

이 기사에서는 주로 이미지 구성 요소의 적응형 너비 비율 표시를 구현하기 위한 WeChat 애플릿 방법을 소개합니다. 이미지 구성 요소의 공통 속성을 간략하게 설명하고 이미지의 적응형 너비 비율을 구현하기 위한 WeChat 애플릿의 관련 작동 기술을 분석합니다. 예를 들어 친구들이 참조할 수 있도록 해야 합니다. 모두에게 도움이 되기를 바랍니다.

이 기사의 예에서는 이미지 구성 요소 사진의 적응형 너비 비율 표시를 실현하는 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. 데이터 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
    })
  }
})

로그인 후 복사