1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序之 image图片自适应宽度比例显示

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

时间:2021-04-06 10:19:09

相关推荐

微信小程序之 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})},})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。