uni-app中vue页面cover-view组件内flex布局失效问题

uni-app中vue页面cover-view组件内flex布局失效问题

开发环境 版本号 项目创建方式
Mac 11.5.2 CLI

产品分类：uniapp/App

PC开发环境操作系统：Mac

手机系统：iOS

手机系统版本号：iOS 14

手机厂商：苹果

手机机型：iphone 8

页面类型：vue

vue版本：vue2

打包方式：云端

CLI版本号：3.4.7.20220422002

示例代码：

<template>  
  <view>  
    <cover-view class="cover-view">  
      <cover-view class="l"></cover-view>  
      <cover-view class="r"></cover-view>  
    </cover-view>  
    <view class="view">  
      <view class="l"></view>  
      <view class="r"></view>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data () {  
    return {};  
  },  
  methods: {},  
};  
</script>  

<style lang="scss">  
.view,  
.cover-view {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  width: 100%;  
  height: 100rpx;  
  background-color: #6cf;  
  margin-top: 20px;  

  .l {  
    width: 20px;  
    height: 20px;  
    background-color: #f00;  
  }  
  .r {  
    width: 20px;  
    height: 20px;  
    background-color: #0f0;  
  }  
}  
</style>  
`

更多关于uni-app中vue页面cover-view组件内flex布局失效问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

补充图片如下

更多关于uni-app中vue页面cover-view组件内flex布局失效问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我也遇到了这个问题

我也遇到了这个问题，请官方解决

HBuilderX 3.5.5 alpha 已修复该问题

请问最新版什么时候更新，目前用3.6.0 alpha 自定义基座打包就失败了 提示： uniapp Execution failed for task ‘:app:checkReleaseDuplicateClasses’

目前用3.5.3打包没问题

还是不行，使用了display: flex; align-items: center;现在里面的内容没了

遇到同样的问题，开始还以为是条件编译的锅，没有解决办法吗？

在 uni-app 中使用 cover-view 组件时，可能会遇到 flex 布局失效的问题。这是因为 cover-view 是原生组件，它的渲染层级高于普通的 view 组件，并且它的布局行为与普通的 view 组件有所不同。

问题原因

cover-view 是用于覆盖在原生组件（如 map、video 等）之上的组件，它的布局和样式受到原生组件的限制。flex 布局在 cover-view 中可能无法正常工作，因为原生组件的布局机制与 Web 的 flex 布局不完全兼容。

解决方案

  1. 使用 inline-flex 布局： 尝试将 display 属性设置为 inline-flex，而不是 flex。有时 inline-flex 在 cover-view 中表现更好。

    <cover-view style="display: inline-flex;">
  <cover-view>Item 1</cover-view>
  <cover-view>Item 2</cover-view>
</cover-view>

  2. 使用 position 布局： 如果 flex 布局无法满足需求，可以尝试使用 position 布局来手动控制子元素的位置。

    <cover-view style="position: relative;">
  <cover-view style="position: absolute; left: 0;">Item 1</cover-view>
  <cover-view style="position: absolute; right: 0;">Item 2</cover-view>
</cover-view>

  3. 使用 float 布局： 在某些情况下，float 布局可以替代 flex 布局。

    <cover-view>
  <cover-view style="float: left;">Item 1</cover-view>
  <cover-view style="float: right;">Item 2</cover-view>
</cover-view>

  4. 使用 grid 布局： 如果目标平台支持 grid 布局，可以尝试使用 grid 布局来替代 flex 布局。

    <cover-view style="display: grid; grid-template-columns: 1fr 1fr;">
  <cover-view>Item 1</cover-view>
  <cover-view>Item 2</cover-view>
</cover-view>

  5. 使用 uni-app 提供的其他组件： 如果 cover-view 的布局限制太大，可以考虑使用 uni-app 提供的其他组件，如 view，并结合 position: fixed 或 position: absolute 来实现类似的效果。

    <view style="position: fixed; top: 0; left: 0; right: 0; display: flex;">
  <view>Item 1</view>
  <view>Item 2</view>
</view>
回到顶部