上篇文件介绍了如何实现九宫格图片展示:css布局入门级实战之九宫格网格布局.不过存在一个问题:图片之间没有间距,用户体验欠佳;基于以上问题,本文进行优化.
    较之前实现样式做以下调整:四张图按照两行显示,每行显示三个.不足的显示空白.之前是两行两列显示.
    对应九宫格样式布局,这里优化一下display布局方式,采用grid的方式进行处理.
简单交代一下使用到的属性:

grid-template-columns:指定显示每列显示的长度,可以使用repeat函数进行简化书写;
grid-template-rows:指定每行显示的长度.
grid-gap:行与列之间的距离

    以下是简化的项目代码:

<template>
	<view>
		<view class="user_class">
			<u-avatar :src="userImg" size="30"></u-avatar>
			<text>{{userName}}</text>
		</view>
		<view class="content">
			<text>{{contentText}}</text>
		</view>
		<view class="img_class" :style="'height:'+imgClassHeight+'px;'">
			<view class="img_content" v-if="imgClassHeight != 5" :style="'height:'+imgClassHeight+'px;grid-template-columns:repeat(3,'+imgWidth+'px);grid-template-rows:auto;'">
				<image v-for="(dynaicImg,index) in contentImgArray" :key="index" :src="dynaicImg" 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,
				contentImg:'',
				contentText:'',  
				userImg:'',  
				userName:'',
				contentImgArray:[],
				commentCount:0,
				createTime:'',
				zanCount:0,
				oneCommentInfoList:[],
				keyboardHeight:0,
				commentFocus: false,
				dynamicId:0,
				dynamicUserId:0,
				comment: '' // 文本框输入评论信息
			};
		},
	   async onLoad(event) {
		  await uni.request({
		       url: 'https://abc:8080/abc/findDynamicInfo', //仅为示例，并非真实接口地址。
		   	data:{
		   		dynamicId:1
		   	},
		       success: (response) => {
		         this.contentImg=response.data.data.contentImg,
		         this.contentText=response.data.data.contentText,  
		         this.userImg=response.data.data.userImg,  
		         this.userName=response.data.data.userName,
				 this.contentImgArray=response.data.data.contentImgArray,
		         this.commentCount=response.data.data.commentCount,
		         this.createTime=response.data.data.createTime,
		         this.zanCount=response.data.data.zanCount,
		         this.dynamicUserId=response.data.data.userId,
				 this.handleImg(response.data.data.contentImgArray.length)
		       }
		   });	
		},
		methods:{
			handleImg(dynamicImgLength){
				// 处理success中无法获取data中属性问题,success中this非vue实例
				let that = this
				// 获取屏幕宽度信息
				uni.getSystemInfo({
					success:function(res) {
						console.log("屏幕宽度:"+res.windowWidth); // 单位:px
						that.screenWith=res.windowWidth;
						console.log("screenWith:"+that.screenWith);
					}
				})
				// 模拟服务器获取的图片数量
				const imgSize=dynamicImgLength;
				// 宽高比:1:1.2
				const WidthHeightRtio=1.2;
				//设置图片区域大小
				if(imgSize == 0){ // 无图片时图片区域大小,默认不显示
					this.imgClassHeight=5;  
				}
				if(imgSize == 1){ // 1张,一行展示
					this.imgClassHeight=240;
					// 宽高比:1:1.2
					this.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 * WidthHeightRtio
					console.log("imgHeight:"+this.imgHeight);
					this.imgClassHeight=this.imgHeight+2;  // 加间距
					console.log("imgClassHeight:"+this.imgClassHeight);
				}
				if(imgSize >= 4 && imgSize <=6){ // 4-6张两行
					// 左右padding为20rpx,所以屏幕宽度需要减去20px,1rpx=0.5px
					this.imgWidth=(this.screenWith-20)/3;  // 每张图片宽度
					console.log("图片个数:"+imgSize+",每张图	大小:"+(this.imgWidth));
					this.imgHeight=this.imgWidth*WidthHeightRtio;
					console.log("imgHeight:"+this.imgHeight);
					// this.imgClassFlexWrap='wrap';
					this.imgClassHeight=this.imgHeight * 2+2; // 加间距
					console.log("imgClassHeight:"+this.imgClassHeight);
				}
				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: 30rpx;
	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: flex-start;
	align-items: center;
	padding-left: 20rpx;
}
.img_class{
	width: 100%;
	
	.img_content{
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: grid;
		grid-gap: 2px;// 间距
	}
}
</style>

    最终实现效果截图:

如果出现列之间间隔过大,调节间距不生效的现象,可以从script中尝试设置相同的行宽与列宽,修改行宽以及列宽修改间隔显示,可以替代grid-gap:

		grid-template-columns:repeat(3,83px);
		grid-template-rows:repeat(3,83px);

    简单记录一下希望对有同样需求的同学有所帮助!