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
可以参考:https://uniapp.dcloud.io/nvue-outline?id=nvue开发与vue开发的常见区别
nvue,vue布局不同
更多关于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定位到底部。这个渲染顺序问题在多次打开页面时尤为明显,导致出现"跳动"效果。
解决方案:
-
使用
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> -
使用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>


