更新记录
1.1.0(2025-07-21) 下载此版本
单独隐藏顶部导航栏以及底部导航条
1.0.0(2025-06-26) 下载此版本
鸿蒙app: 控制屏幕方向,控制底部及顶部安全区的显示隐藏
平台兼容性
uni-app(4.41)
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | - | - | - | - | × | × | √ |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | - | × | × | × | × |
uni-app x(4.41)
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
- | - | × | × | √ | × |
1. 属性
api | 传参 | 必填 | 描述 |
---|---|---|---|
setOrientation | OrientationType: number, options: {success: () => {}, fail: () => {}, complete: () => {}} | OrientationType为必填 | 控制屏幕方向 |
setLandscape | options: {success: () => {}, fail: () => {}, complete: () => {}} | 否 | 横屏 |
setPortrait | options: {success: () => {}, fail: () => {}, complete: () => {}} | 否 | 竖屏 |
hideSafeArea | options: {success: () => {}, fail: () => {}, complete: () => {}} | 否 | 隐藏底部和顶部安全区 |
showSafeArea | options: {success: () => {}, fail: () => {}, complete: () => {}} | 否 | 显示底部和顶部安全区 |
hideBottomNavigation | options: {success: () => {}, fail: () => {}, complete: () => {}} | 否 | 隐藏底部导航栏 |
hideTopStatus | options: {success: () => {}, fail: () => {}, complete: () => {}} | 否 | 隐藏顶部状态栏 |
2. 语法说明
注意:此方法会更改全更改屏幕方向,在返回或进入其他页面时,需要把屏幕方向回正
控制屏幕方向:OrientationType的值可以参考鸿蒙官网,默认为0:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-e#orientation9 应用场景:制作沉浸式页面比如,视频全屏
3.代码示例
vue3
import { setOrientation, hideSafeArea} from '@/uni_modules/f-pageOrientation'
onShow(() => {
// 控制屏幕方向
setOrientation(1, {
success: () => {},
fail: () => {},
complite: () => {}
});
// 隐藏底部和顶部安全区
hideSafeArea({
success: () => {},
fail: () => {},
complite: () => {}
});
})