目录

微信小程序之-image图片自适应宽度比例显示

JAY.LIN 收录于微信小程序

2024-12-01 约 195 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=128232413

目录

微信小程序之 image图片自适应宽度比例显示

一、使用mode: widthFix

widthFix: 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
首先我们先设置image的mode为widthFix，然后给图片加一个固定rpx的宽度，比如700rpx

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

wxml

<view wx:for="{{list}}" wx:key="index">
  <image data-index="{{index}}" bindload="imageLoad" src="{{item.content}}" style="display: none;"></image>
  <image style="width: {{image[index].width}}rpx;height: {{image[index].height}}rpx;" src="{{item.content}}" wx:if="{{image[index].width}}"></image>
</view>

js

Page({
  data: {
  	list: [],
    image: {},
  },
  imageLoad(e) {
    let image  = this.data.image,
    index = e.currentTarget.dataset.index,
    $width = e.detail.width,
    $height = e.detail.height,
    ratio = $width/$height,
    viewWidth = 360,
    viewHeight = 360/ratio;
    image[index] = {
      width: viewWidth,
      height: viewHeight,
    }
    this.setData({
      image: image
    })
  },
})