uniapp社区动态实战:根据图片数量动态改变图片大小

动态列表是各种社交属性软件中最常见的场景,其中用户在发布动态时一般会添加1-9张图片,不同的数量图片显示大小也会不同,下面就聊一下如何根据不同的图片数量动态改变图片大小。以下案例中最多支持9张图显示，每行做多显示3张，多余则进行换行，图片默认的宽高比为1:1.2。
首先看下0-9张图片时对应的图片显示尺寸（以下展示按照图片数量从小到大展示）
在这里插入图片描述

在这里插入图片描述

简单说下实现思路：
根据图片数量进行划分等级,具体实现内容如下:

没有图片时图片盒子设置默认值; 1张图片时图片固定宽高为200px,240px.
2-3张图片时图片固定宽高为(屏幕宽度-左右padding)/图片个数.盒子高度为图片高度,不需换行;
4-6张图片时图片固定宽高为(屏幕宽度-左右padding)/3.盒子高度为图片高度的两倍,需要设置换行;
7-9张图片时图片固定宽高为(屏幕宽度-左右padding)/3.盒子高度为图片高度的三倍,需要设置换行;

屏幕宽度可以使用uni.getSystemInfo进行获取,注意单位为px.说下实现过程中遇到的问题:uni.getSystemInfo的success回调函数中是获取不到data中的属性的,这里处理的方式是重新定义一个变量that进行赋值.具体实现可参考代码.用户的头像使用的是uview中的u-avatar,使用时需要引入uview相关文件.
下面直接上代码:

<template><view><view class="user_class"><u-avatar src="/static/logo.png" size="20"></u-avatar><text>小美</text></view><view class="content"><text>ChatGPT嵌入Office，以后做EXCEL动动嘴就行了！AI时代全面降临</text></view><view class="img_class" :style="'heigt:'+imgClassHeight+'rpx;'"><view class="img_content" v-if="imgClassHeight != 5" :style="'flex-wrap:'+imgClassFlexWrap"><image src="../../static/dynamic_1.png" mode="scaleToFill" :style="'height:'+imgHeight+'px;'+'width:'+imgWidth+'px'"></image><image src="../../static/dynamic_2.png" mode="scaleToFill" :style="'height:'+imgHeight+'px;'+'width:'+imgWidth+'px'"></image><image src="../../static/dynamic_3.png" mode="scaleToFill" :style="'height:'+imgHeight+'px;'+'width:'+imgWidth+'px'"></image><image src="../../static/dynamic_4.png" mode="scaleToFill" :style="'height:'+imgHeight+'px;'+'width:'+imgWidth+'px'"></image><image src="../../static/dynamic_5.png" mode="scaleToFill" :style="'height:'+imgHeight+'px;'+'width:'+imgWidth+'px'"></image><image src="../../static/dynamic_6.png" mode="scaleToFill" :style="'height:'+imgHeight+'px;'+'width:'+imgWidth+'px'"></image><image src="../../static/dynamic_7.png" mode="scaleToFill" :style="'height:'+imgHeight+'px;'+'width:'+imgWidth+'px'"></image><image src="../../static/dynamic_8.png" mode="scaleToFill" :style="'height:'+imgHeight+'px;'+'width:'+imgWidth+'px'"></image><image src="../../static/dynamic_9.png" mode="scaleToFill" :style="'height:'+imgHeight+'px;'+'width:'+imgWidth+'px'"></image></view></view></view>
</template><script>export default {data() {return {// 图片区域大小,根据图片数量动态变化imgClassHeight: 0,// 图片区域是否换行imgClassFlexWrap: '',// 图片宽度imgWidth: 400,// 图片高度imgHeight: 400,// 屏幕宽度大小screenWith: 0};},onLoad() {// 处理success中无法获取data中属性问题,success中this非vue实例let that = this// 获取屏幕宽度信息uni.getSystemInfo({success:function(res) {console.log("屏幕宽度:"+res.windowWidth); // 单位:pxthat.screenWith=res.windowWidth;console.log("screenWith:"+that.screenWith);}})// 模拟服务器获取的图片数量const imgSize=9;// 宽高比:1:1.2const WidthHeightRtio=1.2;//设置图片区域大小if(imgSize == 0){ // 无图片时图片区域大小,默认不显示this.imgClassHeight=5;  }if(imgSize == 1){ // 1张,一行展示this.imgClassHeight=240;// 宽高比:1:1.2this.imgWidth=200;this.imgHeight=240}if(imgSize >= 2 && imgSize <=3){ // 2-3张,一行展示this.imgWidth=(this.screenWith-20)/imgSize;// 按照页面实际显示保持宽高比console.log("图片个数:"+imgSize+",每张图大小:"+(this.imgWidth));this.imgHeight=this.imgWidth * WidthHeightRtiothis.imgClassHeight=this.imgHeight;}if(imgSize >= 4 && imgSize <=6){ // 4-6张两行// 左右padding为20rpx,所以屏幕宽度需要减去20px,1rpx=0.5pxthis.imgWidth=(this.screenWith-20)/3;  // 每张图片宽度console.log("图片个数:"+imgSize+",每张图	大小:"+(this.imgWidth));this.imgHeight=this.imgWidth*WidthHeightRtio;this.imgClassFlexWrap='wrap';this.imgClassHeight=this.imgHeight * 2;}if(imgSize >= 7 && imgSize <=9){ // 7-9张三行this.imgWidth=(this.screenWith-20)/3;  // 每张图片宽度this.imgHeight=this.imgWidth*WidthHeightRtio;this.imgClassFlexWrap='wrap';this.imgClassHeight=this.imgHeight * 3;}}}
</script><style lang="scss">
.user_class{padding-top: 10rpx;height: 60rpx;width: 100%;display: flex;justify-content: flex-start;align-items: center;padding-left: 20rpx;text{padding-left: 20rpx;}
}
.content{height: 150rpx;width: 100%;display: flex;justify-content: center;align-items: center;text{padding: 20rpx;}
}
.img_class{width: 100%;.img_content{display: flex;flex-direction:row;justify-content: flex-start;align-items: center;padding-left: 20rpx;padding-right: 20rpx;}}
</style>