uni-app 无内置锁屏界面及默认控制按钮,常见于视频控件、启动页广告插件或误认全屏页面;需通过 controls="false"、show-center-play-btn="false" 等属性禁用视频控制栏,检查 manifest.json 和第三方插件,并用真机调试定位原生层按钮。

uni-app 没有“锁屏界面”这个内置概念,也不存在所谓“锁屏界面的默认控制按钮”。你遇到的大概率是以下三种情况之一:App 启动页(splash)上的系统级控件、视频播放器组件(如 或 uni-app 封装的播放器)的原生控制栏,或是误将全屏页面当成锁屏界面。先确认问题源头,再针对性处理。
确认是不是 video 组件的 controls 属性在作怪
微信小程序和 H5 中, 标签默认会显示系统控制栏(播放/暂停、进度条、音量等),这是浏览器或小程序引擎强制渲染的 UI,不是 uni-app 自己加的。关键点在于:controls 属性是否被显式开启。
- 如果没写
controls,但控制栏仍出现,说明平台默认开启了它(H5 默认开启,小程序部分版本也如此) - 必须显式设
controls="false"(注意是字符串"false",不是布尔值false)才能禁用 - 小程序中还需配合
show-center-play-btn="false"和show-play-btn="false"才能彻底隐藏中间播放按钮 - H5 下即使关了
controls,右键菜单仍可能暴露控制项,需额外加@contextmenu.prevent
App 启动页(splash)上的返回/跳过按钮是谁加的
Android/iOS 原生启动页由 manifest.json 中的 app-plus.splash 配置控制,它本身不带任何按钮。如果你看到“跳过”或“返回”按钮,那一定是你自己写的逻辑,或者用了第三方插件(比如某广告 SDK 注入的跳过按钮)。uni-app 官方 splash 不提供、也不允许添加交互控件。
- 检查
manifest.json → app-plus → splash下有没有自定义buttons字段(官方不支持该字段,如有则是插件注入) - 搜索项目中是否引用了类似
uni-ad、ad-splash等广告插件,它们常自带跳过按钮 - 真机调试时用 Android Studio 的 Layout Inspector 或 Xcode 的 View Debugger 查看按钮所属 native view,定位来源
误把全屏页面当锁屏?小心自定义导航栏的副作用
有些开发者把全屏展示的登录页、引导页称作“锁屏”,然后试图隐藏导航栏按钮——但 uni-app 的 navigationStyle: "custom" 只影响顶部导航栏,跟“锁屏”无关。如果你在页面里手动写了 或 作为关闭/跳过入口,那它就只是个普通按钮,移除方式和其他 button 完全一致:
- 用
plain属性消除默认背景和边框 - 加
hover-class="none"关闭点击态 - CSS 强制重置:
border: none; background: transparent; outline: none; - 注意小程序平台不支持
:active伪类,得靠hover-class控制
最容易被忽略的是:所谓“锁屏按钮”往往根本不在 uni-app 渲染层,而是原生层(如广告 SDK、系统视频控件、启动图 overlay)注入的。别在 Vue 模板里死磕样式,先用真机调试工具确认 DOM 或 native view 的归属。否则所有 CSS 都是徒劳。











