Uniapp开发过程中解决的一个Flex布局问题

<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>