上篇文件介绍了如何实现九宫格图片展示: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:文章来源：https://www.toymoban.com/news/detail-429291.html
grid-template-columns:repeat(3,83px);
grid-template-rows:repeat(3,83px);
简单记录一下希望对有同样需求的同学有所帮助!文章来源地址https://www.toymoban.com/news/detail-429291.html
到了这里，关于css布局实战:动态详情九宫格的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[CSS] 图片九宫格](https://imgs.yssmx.com/Uploads/2024/02/637640-1.png)
