집 > 기사 > 웹 프론트엔드 > WeChat 애플릿에서 이미지 구성 요소 그림의 적응형 표시를 구현하는 방법

WeChat 애플릿에서 이미지 구성 요소 그림의 적응형 표시를 구현하는 방법

亚连원래의: 2018-06-11 16:53:503217검색

이 글에서는 이미지 구성 요소에서 이미지의 적응형 너비 비율 표시를 구현하기 위한 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
    })
  }
})

위 내용이 모두에게 도움이 되기를 바랍니다. 앞으로도 모든 사람에게.

WeChat 애플릿에서 이미지 구성 요소 그림의 적응형 표시를 구현하는 방법

관련 기사