uni-app安卓上nvue页面view使用position:fixed;bottom: 0;样式初始化混乱

uni-app安卓上nvue页面view使用position:fixed;bottom: 0;样式初始化混乱

开发环境 版本号 项目创建方式
Mac Monterey 12.0.1 HBuilderX

产品分类:uniapp/App
PC开发环境操作系统:Mac
手机系统:Android
手机系统版本号:Android 12
手机厂商:华为
手机机型:华为mate 30 pro max
页面类型:nvue
vue版本:vue2
打包方式:云端

bug描述:
在安卓上nvue页面view使用position:fixed;bottom: 0;样式,多打开页面进几次就会出现固定元素先出现在顶部再固定到底部,vue页面不会出现这种问题,官网示例Hello uni-app也会有这种情况

示例代码:

position:fixed;bottom: 0;

更多关于uni-app安卓上nvue页面view使用position:fixed;bottom: 0;样式初始化混乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

更多关于uni-app安卓上nvue页面view使用position:fixed;bottom: 0;样式初始化混乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


兄弟解决了没,

我也遇到过几次,但不是经常,这是啥原因呀

我这用flex布局 justify-content: space-between;上下布局也是相同问题,下面的元素会从上面跳到下面, 尝试过用定位,css样式写全局,都没用

提供下具体demo 我们排查下

官网示例Hello uni-app也会有这种情况,在拓展组件里的uni-goods-nav商品导航,反复点开会偶现底部固定内容先出现在顶部闪现一下

我录了个屏https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e906379e-a045-42b0-8c1e-d88d93ba20d3/f02f5667-f42a-496f-92b0-98c513ee2a9c.mp4

回复 摸鲸工程师: 问题已确认,会尽快修复

这是一个已知的nvue在Android平台上的渲染问题,主要涉及fixed定位元素的初始化渲染流程。

问题原因: 在Android平台的nvue页面中,使用position:fixed;bottom:0的视图元素在页面初始化时,会先按照默认的static定位渲染到顶部,然后才应用fixed定位到底部。这个渲染顺序问题在多次打开页面时尤为明显,导致出现"跳动"效果。

解决方案:

  1. 使用v-if延迟渲染(推荐): 通过v-if控制fixed元素的渲染时机,确保在页面布局稳定后再显示。

    <template>
      <view v-if="showFixed" style="position:fixed;bottom:0">
        <!-- 内容 -->
      </view>
    </template>
    
    <script>
    export default {
      data() {
        return {
          showFixed: false
        }
      },
      mounted() {
        // 延迟显示,确保布局已完成
        setTimeout(() => {
          this.showFixed = true
        }, 50)
      }
    }
    </script>
    
  2. 使用opacity过渡: 初始设置透明度为0,渲染完成后再显示。

    <template>
      <view :style="{position:'fixed',bottom:'0',opacity:opacityValue}">
        <!-- 内容 -->
      </view>
    </template>
    
    <script>
    export default {
      data() {
        return {
          opacityValue: 0
        }
      },
      mounted() {
        setTimeout(() => {
          this.opacityValue = 1
        }, 50)
      }
    }
    </script>
回到顶部