Uniapp开发过程中解决的一个Flex布局问题
我制作了一个用户的动态详情页面，然后有一个动态的图片展示，是九宫格，使用的是 Flex 布局，刚开始我没有注意，最后调试的时候我发现样式出了问题，我慌地一批，还好解决了，方法可能不咋样，但好在解决了，记录一下❤️
九宫格：
八宫格：
五宫格：
问题越变越大
- 首先是图片没有紧贴下一个
- 然后是每行的间距突然变大
问题 2 的解决思路是:
把这个九宫格的高度 height: auto; 进行自适应，就解决了问题 2；
问题 1 的解决思路是:
使用部分空的 view 元素去占位，但是占位的时候要分情况进行讨论；
源代码如下
<template>
<view class="container">
<view class="avatar">
<image class="img" src="https://cdn.nlark.com/yuque/0/2023/jpeg/34278134/1699776030126-324ac0b3-648e-4a09-80aa-2b257dbbfa89.jpeg"></image>
<view class="info">
<view class="name">一小池勺</view>
<view class="date">2023-11-25</view>
</view>
</view>
<view class="con">
“越来越发现自己适合成为一个辅助型的人，不知道这算不算是不是一条平庸的想法，我会慢慢朝着一个强有力的辅助型的人方面去发展的”
</view>
<view class="imgList">
<view v-for="(item,index) in imgList" class="item" @click="previewImage(index)">
<image :src="item" class="img" mode="aspectFill"></image>
</view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 1 && imgList.length <= 2"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 3 && imgList.length <= 5"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
<view v-if="imgList.length > 6 && imgList.length < 9"></view>
</view>
<view class="like">
<view class="box">
<image class="img" src="../../static/025_点赞-30.png" @click="dynamicLike"></image>
<text class="num">
3
</text>
</view>
<image class="img" src="../../static/025_分享-17.png"></image>
</view>
<view class="comments">
<view class="title">全部评论</view>
<view
class="comment-box"
:class="{ expanded: isExpanded }"
@click="toggleExpand"
>
<textarea class="inp" v-model="commentContent" :maxlength="300" placeholder="说点什么吧..."></textarea>
<view class="box">
<view class="num">{{ commentContent.length }} / 300</view>
<view class="publish-btn" @click="publishComment">发表</view>
</view>
</view>
</view>
<view v-if="commentsList.length === 0 ? true : false" class="imgsbox">
<!-- https://pic2.zhimg.com/v2-c24a51507ef271b12af06248bbfde3d5_r.jpg -->
<image class="img" src="https://pic2.zhimg.com/v2-c24a51507ef271b12af06248bbfde3d5_r.jpg"></image>
<view>还没有评论，快来占楼吧~</view>
</view>
<view v-else class="comments_item">
<view class="title">最新评论</view>
<view class="list">
<view class="item"></view>
</view>
</view>
</view>
</template>
<script>
import { Dynamiclikes } from '../../services/AboutDynamics.js'
export default {
data() {
return {
commentContent: '',
isExpanded: false,
commentsList: [],
imgList: [
"https://pic3.zhimg.com/v2-e5c6964eb6126cc4623c7d23920766c2_r.jpg",
"https://pic2.zhimg.com/v2-9450e2e4fd65e246fb4acc8fed1c6f01_r.jpg",
"https://pic3.zhimg.com/v2-36cfbcc24668d6e98ccd614186fcdf5a_r.jpg",
"https://pic3.zhimg.com/v2-ea3f4350334ce0e90dc82c9a9797dd86_r.jpg",
"https://pic4.zhimg.com/v2-a6ae2af8cd7f488e8fd82ba2fd60dabf_r.jpg",
"https://pic4.zhimg.com/v2-f1f0d78f47b4c8041ed2185e11f7cbbf_r.jpg",
"https://pic2.zhimg.com/v2-1ff9560ff469dbe558f6d4bf0a740d21_r.jpg",
"https://pic4.zhimg.com/v2-19de974caf855fb27bc0f962dbce9613_r.jpg",
"https://pic2.zhimg.com/v2-1bf9e4d9a37bb5d1849c606b62ff52f5_r.jpg"
]
}
},
methods: {
// 点赞
async dynamicLike() {
// 假设跳转到该动态页面 并且拿到了该动态的标识信息
try {
let momentId = 0
let sentenceId = 0
let userId = 0
await Dynamiclikes(momentId,sentenceId,userId)
} catch (error) {
console.log("错误信息:",error)
}
},
previewImage(index) {
uni.previewImage({
urls: this.imgList,
current: this.imgList[index] // 当前图片
})
},
toggleExpand() {
this.isExpanded = !this.isExpanded
},
publishComment() {
this.commentContent = ''
setTimeout(() => {
uni.showToast({
title: '发布成功',
icon: 'success'
})
}, 1000)
}
}
}
</script>
<style lang="scss" scoped>
.container {
width: 100vw;
height: auto;
.avatar {
display: flex;
width: 90%;
margin: 0 auto;
.img {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.info {
margin-left: 20rpx;
.name {
font-size: 35rpx;
color: skyblue;
font-weight: 200;
margin-bottom: 10rpx;
}
.date {
font-size: 20rpx;
color: #ccc;
font-weight: 100;
}
}
}
.con {
width: 90%;
margin: 50rpx auto;
}
.imgList {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90vw;
height: auto;
// background-color: red; 背景板
margin: 0 auto;
.item {
width: 32%;
height: 200rpx;
border-radius: 10rpx;
overflow: hidden;
margin-bottom: 15rpx;
box-shadow: 0px 0px 7rpx 2rpx rgba(0, 0, 0, 0.1);
.img {
width: 100%;
height: 100%;
}
}
}
.like {
width: 90%;
display: flex;
justify-content: flex-start;
margin: 30rpx auto;
.box {
display: flex;
height: auto;
align-items: center;
.img {
width: 40rpx;
height: 40rpx;
}
.num {
margin: 0 35rpx 0 10rpx;
font-weight: 100;
}
}
.img {
width: 40rpx;
height: 40rpx;
}
}
.comments {
width: 90%;
margin: 0 auto;
.title {
font-weight: 800;
font-size: 40rpx;
margin-bottom: 40rpx;
}
.comment-box {
width: 90%;
margin: 0 auto;
padding: 20rpx;
border: 1px solid #ccc;
border-radius: 10rpx;
overflow: hidden;
background-color: #F8F8F8;
.inp {
width: 100%;
height: 80rpx;
box-sizing: border-box;
padding: 10rpx;
margin-bottom: 10rpx;
transition: all 0.3s; // 过渡一下
}
.box {
display: flex;
justify-content: space-between;
width: 100%;
color: #ccc;
.num {
}
.publish-btn {
}
}
&.expanded {
.inp {
height: 200px; // 评论框的高度变大
}
}
}
}
.imgsbox {
width: 90%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
color: #ccc;
font-size: 35rpx;
font-weight: 100;
margin-bottom: 100rpx;
}
.comments_item {
.title {}
.list {
.item {}
}
}
}
</style>结语
欢迎各位大佬指出我这个解决方法的不足之处，一起进步！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-12-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录