AI 助理
备案控制台
开发者社区 云计算 文章 正文

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

2024-01-03 118
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Uniapp开发过程中解决的一个Flex布局问题

九宫格：

八宫格：

五宫格：

问题越变越大

  1. 首先是图片没有紧贴下一个
  2. 然后是每行的间距突然变大

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

结语

欢迎各位大佬指出我这个解决方法的不足之处，一起进步！

关键词：
flex布局
开发flex
开发flex布局
zrblue
目录
相关文章
追逐时光者
|
5天前
|
设计模式 开发框架 JavaScript
基于.NET8 + Vue/UniApp前后端分离的快速开发框架，开箱即用！
基于.NET8 + Vue/UniApp前后端分离的快速开发框架，开箱即用！
追逐时光者
18 0
那年春天
|
1月前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
那年春天
109 57
我是快乐的嘟嘟
|
21天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
95 34
游客g5tp3lgf24cqc
|
8天前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中，还可以用table元素来实现双行夹批效果，但比flex布局代码更复杂，效果也不见得更理想。
游客g5tp3lgf24cqc
32 10
lqj_本人
|
10天前
|
开发者 UED 容器
鸿蒙next版开发：ArkTS组件通用属性（Flex布局）
在HarmonyOS next中，ArkTS的Flex布局是一种强大且灵活的布局方式，支持水平或垂直方向排列元素，并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap，适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
lqj_本人
37 10
diygwcom
|
1月前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
diygwcom
122 1
uniapp一个人开发APP关键步骤和考虑因素
dufadayang
|
21天前
|
容器
在 Flex 布局中，如何设置元素在侧轴上的初始对齐方式？
【10月更文挑战第22天】同时，还可以进一步探索其他 Flex 布局相关的属性和技巧，以更好地掌握 Flex 布局的强大功能，创造出更具创意和适应性的页面布局。
dufadayang
24 2
那年春天
|
1月前
|
前端开发 容器
flex布局
【10月更文挑战第7天】
那年春天
28 1
Li370234940
|
1月前
多个p标签，并让div“flex”布局，且单行溢出隐藏
多个p标签，并让div“flex”布局，且单行溢出隐藏
Li370234940
28 0
Li370234940
|
1月前
|
容器
flex布局
flex布局
Li370234940
44 0

热门文章

最新文章

  • 1
    【小程序开发】uniapp引入iconfont图标及使用方式
  • 2
    【笔记01】在 uniapp 安装 uview-ui
  • 3
    uniapp-跳转外部链接
  • 4
    UniApp 解决 Error: Cannot find module ‘webpack/lib/RuleSet‘
  • 5
    从零开始uniapp微信小程序项目到发布（超级详细）
  • 6
    uniapp本地导出表格excel
  • 7
    基于SpringBoot+Vue+uniapp的校园跑腿管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
  • 8
    uniapp实现时间选择器
  • 9
    构建跨平台应用的利器——UniApp入门级开发指南
  • 10
    基于SpringBoot+Vue+uniapp的宠物医院管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
  • 1
    基于SpringBoot+Vue+uniapp的公园管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
    74
  • 2
    基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
    112
  • 3
    基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
    113
  • 4
    基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
    127
  • 5
    基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
    86
  • 6
    基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
    80
  • 7
    基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
    82
  • 8
    基于SpringBoot+Vue+uniapp的在线招聘平台的详细设计和实现(源码+lw+部署文档+讲解等)
    72
  • 9
    基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
    62
  • 10
    基于SpringBoot+Vue+uniapp的公交系统的详细设计和实现(源码+lw+部署文档+讲解等)
    70

    • 相关电子书

    更多
  • UI2CODE智能生成flutter代码--整体架构 【上叶】
  • 《优酷响应式布局技术全解析》
  • APP加固新方向-混淆和瘦身
    • 下一篇
    阿里云OSS设置跨域访问