uni-app nvue页面position: fixed之后调用position: relative或position: absolute无法恢复

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app nvue页面position: fixed之后调用position: relative或position: absolute无法恢复

开发环境 版本号 项目创建方式
Windows Windows10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.29

手机系统：Android

手机系统版本号：Android 14

手机厂商：小米

手机机型：小米14

页面类型：nvue

vue版本：vue3

打包方式：云端

示例代码：

    <view style="position: relative; height: 300rpx; width: 300rpx; background: #333;" :style="isFullScreen?{position: 'fixed'}:{position: 'relative'}"></view>  
<button @click="dj">点击</button>  
<button @click="dj2">点击2</button>  
<view style=" height: 3000rpx; width: 300rpx; background: #f33;"></view>  

export default {  
   data() {  
    return {  
        isFullScreen:false        
    }  
   },  
  methods: {  
    dj() {  
        this.isFullScreen=true  
    },  
      dj2() {  
        this.isFullScreen=false  
    },  
   }  
}
```

操作步骤：
nvue页面position: fixed之后调用position: relative或者position: absolute无法恢复

预期结果：
nvue页面position: fixed之后调用position: relative或者position: absolute恢复正常

实际结果：
nvue页面position: fixed之后调用position: relative或者position: absolute无法恢复

bug描述：
nvue页面position: fixed之后调用position: relative或者position: absolute无法恢复

Harmonyos Next教程
1 回复

在uni-app中使用nvue页面时，由于nvue是基于Weex引擎渲染的原生页面，与vue页面的Web渲染机制有所不同，因此在处理布局和定位时可能会遇到一些差异。在nvue页面中，一旦某个元素设置了position: fixed，其后的元素如果尝试使用position: relative或position: absolute进行定位，可能会因为固定定位的元素占据了布局中的特殊位置而导致恢复相对或绝对定位时表现不符合预期。

这里提供一种可能的解决方案，通过代码示例展示如何在nvue中处理这类布局切换的情况。由于nvue不支持完整的CSS动画或过渡效果，我们将主要通过JavaScript来控制元素的显示和隐藏，以及它们的定位属性。

<template>
  <div>
    <button @click="togglePosition">Toggle Position</button>
    <div :style="containerStyle">
      <div :style="fixedElementStyle" class="fixed-element">Fixed Element</div>
      <div :style="relativeElementStyle" class="relative-element">Relative Element</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFixed: true,
    };
  },
  computed: {
    containerStyle() {
      return {
        height: '300px',
        width: '300px',
        border: '1px solid #000',
        overflow: 'hidden',
        position: 'relative', // Ensure the container has a relative context for positioning
      };
    },
    fixedElementStyle() {
      return {
        position: this.isFixed ? 'fixed' : 'static',
        top: this.isFixed ? '10px' : 'auto',
        left: this.isFixed ? '10px' : 'auto',
        width: '100px',
        height: '100px',
        background: 'red',
      };
    },
    relativeElementStyle() {
      return {
        position: this.isFixed ? 'static' : 'relative',
        top: this.isFixed ? '0' : '50px',
        left: '0',
        width: '100px',
        height: '100px',
        background: 'blue',
      };
    },
  },
  methods: {
    togglePosition() {
      this.isFixed = !this.isFixed;
    },
  },
};
</script>

<style scoped>
.fixed-element, .relative-element {
  text-align: center;
  line-height: 100px;
  color: white;
}
</style>

在这个示例中，我们使用了Vue的响应式数据绑定和计算属性来控制两个元素的定位。通过点击按钮，可以切换fixedElement的position属性，同时调整relativeElement的定位以适应布局变化。注意，当fixedElement变为static时，relativeElement的位置会相对其正常流中的位置进行调整。这种方法虽然不能直接解决所有布局问题，但提供了一种思路来处理nvue中定位属性的切换。

回到顶部