The previous document introduced how to realize Jiugongge picture display: css layout entry-level practical Jiugongge grid layout . However, there is a problem: there is no spacing between pictures, and the user experience is not good; based on the above problems, this article is optimized.
Compared with the previous implementation style Make the following adjustments: the four pictures are displayed in two rows, and each row displays three. The insufficient display is blank. It was displayed in two rows and two columns before. Corresponding to the
Jiugongge style layout, here we optimize the display layout method and use the grid method for processing.
Briefly explain the attributes used:
grid-template-columns: specify the length of each column displayed, you can use the repeat function to simplify writing;
grid-template-rows: specify the length of each line displayed.
grid-gap: the distance between rows and columns
Here is the simplified project code:
<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>
Screenshot of the final realization effect:
If the interval between columns is too large and the adjustment of the spacing does not take effect, you can scripttry set the same row width and column width, modify the row width and column width to modify the interval display, which can be replaced grid-gap:
grid-template-columns:repeat(3,83px);
grid-template-rows:repeat(3,83px);
Simply record it and hope it will be helpful to students who have the same needs!