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>

以上是处理多张图片动态改变图片大小的实现方案,看完希望对你有所帮助或启发,欢迎评论区留言交流或是点赞收藏!

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

UniAPP社区项目实战教案
千锋教育 UniAPP 社区论坛项目多端开发实战学习目的: 通过学习,对标企业级「大前端」开发实践标准,从零到一构建「社区论坛类」客户端应用项目, 输出相关 Web H5.微信小程序.安卓 AP ...
JavaScript改变图片大小
JavaScript改变图片大小 <!DOCTYPE html><html lang="en"><head><meta charset=& ...
VC2010“添加资源-引入JPG图片”会改变图片大小
结论: 通过VC2010添加JPG图片(添加资源->引入jpg图片)会改变图片大小. 本身只是为了想给对话框添加一个背景图片,试了下bmp的,都没有问题. 为了测试下是否可以加载(用LoadIm ...
css让image不改变大小_如何改变图片大小
我们进行网页设计的时候图片有时候可以会不符合大小,那我们怎么样才能在代码中实现图片大小的改变呢?本篇文章就来给大家介绍关于如何改变图片的大小? 我们改变图片的大小有两种方法:一种是在HTML标签内更改 ...
html怎么改变图片整体大小,css怎么改变图片大小？
css怎么改变图片大小?下面本篇文章就来给大家介绍一下使用css改变图片大小的方法,希望对大家有所帮助. 在HTML页面中,图片的显示方法有两种,分别为:img图片,background(背景)图片. ...
通过拖拽改变图片大小
<!doctype html> <html lang="en"><head><meta charset="utf-8" ...
微信小程序tabBar改变图片大小方法
1.最少用,但是最简单,用原生tabBar用ps改变图片大小 2.用原生提供的custom-tab-bar(可能会存在一些小问题,比如switchTab的跳转之类的) 3.自定义组件,把所有页面变成子 ...
C#使用OpenCv图像批处理——改变图片大小并且重命名
添加NuGet包选择最新版就好了安装完成后右键项目重新生成方案使用OpenCvSharp.CPlusPlus命名空间 using OpenCvSharp.CPlusPlus; 写一个函数用来改变 ...
python改变图片大小不失针
import os from math import floor import PIL.Image as ImageIMAGES_PATH = "C:\\Users\\Administrat ...

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

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

最新文章

热门文章