uni-app 设置页面透明跳转页面问题及视频问题

开发环境	版本号	项目创建方式
Windows	win10专业版 21H1	HBuilderX

示例代码：

</view> </view>

/* scss */

.content-video{
position: sticky;
top: var(–window-top);
left: 0;
display: block;
width: 100%;
height: 420rpx;
z-index: 9;

.content-video-pos{  
    position: relative;  
    width: 100%;  
    height: 100%;  
}  

video{  
    width: 100%;  
    height: 100%;  
}

}


操作步骤：
- 剪贴进去一个长页面滚动,导致视频会跟着页面移动

预期结果：
- 视频会固定在该位置

实际结果：
- 视频不会固定在该位置

bug描述：
页面设置为透明之后无动画效果进入页面会造成闪烁...请问这个问题如何解决呢??

position: sticky;
top: var(–window-top);
left: 0;

视频容器设置为这个之后,视频位置就会跟着页面移动,,不会固定在那里..请问这个问题如何解决呢??  
压窗屏可以设置背景为透明之后无动画跳转模拟,,视频问题如下;  
以上问题均在app端

更多关于uni-app 设置页面透明跳转页面问题及视频问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 1楼

更多关于uni-app 设置页面透明跳转页面问题及视频问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

针对你提到的两个问题，以下是解决方案：

1. 视频跟随页面滚动问题 position: sticky 在部分APP端（尤其是iOS）可能支持不完善。建议改用 position: fixed 实现固定定位：

.content-video{
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    height: 420rpx;
    z-index: 9;
}

注意：使用fixed定位后，视频会脱离文档流，需确保下方内容有足够的上边距避免被遮挡。

2. 透明页面跳转闪烁问题 这是APP端页面渲染机制导致的。可通过以下方式缓解：

在 pages.json 中为目标页面配置透明背景：

{
    "path": "pages/yourPage",
    "style": {
        "app-plus": {
            "background": "transparent",
            "animationType": "none"
        }
    }
}

在页面onLoad时延迟设置背景透明：

onLoad() {
    setTimeout(() => {
        uni.setNavigationBarColor({
            frontColor: '#ffffff',
            backgroundColor: 'transparent'
        });
    }, 50);
}