uni-app nvue模式下 动态修改position为fixed 失效

uni-app nvue模式下 动态修改position为fixed 失效

操作步骤：

  • 普通的view标签,修改position为fixed,在切回去就不行

预期结果：

  • 普通的view标签,修改position为fixed,在切回去就不行

实际结果：

  • 普通的view标签,修改position为fixed,在切回去就不行

bug描述：

  • ios和Android,动态修改css position:fixed,可以修改,但是不能切换回去.

| 开发环境          | 版本号   | 项目创建方式 |
|-------------------|----------|--------------|
| Windows           | windows10| HBuilderX    | 

| 手机系统          | 手机系统版本号 | 手机厂商 | 手机机型 | 页面类型 | vue版本 |
|-------------------|---------------|----------|----------|----------|---------|
| Android           | Android 12    | OPPO     | 1+ plus  | nvue     | vue3    |

更多关于uni-app nvue模式下 动态修改position为fixed 失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

加个 key值就行了 <template>
<view>
<view class="is-position" :key="position" :style="{'position':position}">
position–{{position}}
</view>
<button @click=“fiexd”>fiexd</button>
<view class="flex" v-for="(item,index) in 20" :key="index">
{{item}}
</view>
<button @click=“fiexd”>fiexd</button>
</view>
</template>

<script> export default { data() { return { position:'fixed' } }, methods:{ fiexd(){ if(this.position == 'fixed'){ this.position = 'relative' }else{ this.position = 'fixed' } } } } </script> <style> .is-position{ padding: 30rpx; background-color: #999; z-index: 10; width: 750rpx; display: block; } .flex{ padding: 30rpx; } </style>

更多关于uni-app nvue模式下 动态修改position为fixed 失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢兄弟,这个方法比v-if好用多了!

回复 q***@hotmail.com: 客气了

在 uni-app 的 nvue 模式下，动态修改 position 为 fixed 可能会失效，这是因为 nvue 使用了原生渲染引擎，与传统的 H5 渲染方式有所不同。nvue 的布局和样式渲染是基于原生组件的，因此在某些情况下，position: fixed 的行为可能与你在 H5 中期望的不一致。

可能的原因和解决方案

  1. 父元素布局限制：

    • 在 nvue 中，position: fixed 的效果可能会受到父元素布局的影响。如果父元素使用了 flex 布局，或者有其他布局限制，可能会导致 fixed 失效。
    • 解决方案：确保父元素没有使用 flex 布局，或者尝试将需要 fixed 定位的元素放在最外层。

  2. 层级问题：

    • 在 nvue 中，z-index 的行为可能与 H5 不同，导致 fixed 定位的元素被其他元素遮挡。
    • 解决方案：尝试调整 z-index，确保 fixed 定位的元素位于其他元素之上。

  3. 样式更新问题：

    • 在 nvue 中，动态修改样式可能会遇到渲染不及时的问题。
    • 解决方案：尝试使用 $nextTick 确保样式在 DOM 更新后生效。
    this.$nextTick(() => {
    this.position = 'fixed';
});

  4. 使用 absolute 替代 fixed：

    • 如果 fixed 定位不符合预期，可以尝试使用 absolute 定位，并通过计算元素的位置来模拟 fixed 的效果。

  5. 使用 cover-view：

    • 在某些情况下，nvue 中的 cover-view 组件可以用于实现类似 fixed 定位的效果。cover-view 是原生组件，可以覆盖在其他原生组件之上。

示例代码

<template>
  <view class="container">
    <view :style="positionStyle" class="fixed-box">
      我是一个固定定位的元素
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      position: 'absolute'
    };
  },
  computed: {
    positionStyle() {
      return {
        position: this.position,
        top: '0',
        left: '0',
        width: '100%',
        backgroundColor: 'red',
        zIndex: 999
      };
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.position = 'fixed';
    });
  }
};
</script>

<style>
.container {
  flex: 1;
}
.fixed-box {
  height: 50px;
}
</style>
回到顶部