uniapp锁定屏幕强制竖屏

虎仔_

已于 2023-06-12 15:54:10 修改

阅读量2.2k

点赞数 1

文章标签： uni-app

于 2023-06-12 15:48:12 首次发布

本文链接：https://blog.csdn.net/qq_40063198/article/details/131170278

版权

方法一：

第一步
uniapp 根目录下pages.json 文件中追加下面四项

"globalStyle": {
    "pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持         auto / portrait / landscape
    "rpxCalcMaxDeviceWidth": 960,
    "rpxCalcBaseDeviceWidth": 375,
    "rpxCalcIncludeWidth": 750
}

第二步
uniapp 根目录下mainfest.json文件中追加如下配置

distribute" : {
    "orientation" : ["portrait-primary" ] //重力感应、横竖屏配置
}

第三步
在你想强制横竖屏的页面的vue文件中的 onLoad 或者onShow的生命周期里面加上如下代码即可

//#ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary');
//#endif

方法二：

app.vue加以下代码

onLaunch: function() {
    //#ifdef APP-PLUS
    plus.screen.lockOrientation('landscape-primary'); // 强制横屏
    plus.screen.lockOrientation('portrait-primary'); // 强制竖屏
    //#endif
},