uniapp APP和微信小程序横屏模式实现代码
<p>首先在<strong>pages.json</strong>下新增代码：</p><div class="jb51code"><pre class="brush:json;">"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"pageOrientation": "auto" //横屏配置 auto自动 | portrait竖屏 | landscape横屏
},</pre></div>
<p>微信小程序横屏：</p>
<p>在<strong>pages.json</strong>下添加代码（进入页面自动横横屏）：</p>
<div class="jb51code"><pre class="brush:json;">{
"path": "pages/native/demo",
"style": {
"navigationBarTitleText": "横屏模式",
"enablePullDownRefresh": false,
"backgroundTextStyle": "dark",
"mp-weixin": {
"pageOrientation": "landscape" //auto:自动，landscape：横屏，portrait ：竖屏
}
}
}</pre></div>
<p>页面代码实现：</p>
<div class="jb51code"><pre class="brush:js;"><template>
<view class="">
<button type="default" @click="onCrosswise('default')">默认横竖屏切换</button>
<button type="default" @click="onCrosswise('portrait')">竖屏</button>
<button type="default" @click="onCrosswise('landscape')">横屏</button>
</view>
</template>
<script setup>
import {
ref,
reactive,
watch,
onMounted,
} from "vue"
import {
onLoad,
onReady,
onUnload
} from '@dcloudio/uni-app'
// 切换模式
const onCrosswise = (mode) => {
if (mode == 'default') {
// #ifdef APP-PLUS
plus.screen.lockOrientation('default'); // 默认横竖屏切换
// #endif
} else if (mode == 'portrait') {
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary'); // 竖屏展示
// #endif
} else {
uni.navigateTo({
url: "/pages/native/demo",
success: function(res) {
// #ifdef APP-PLUS
plus.screen.lockOrientation('landscape-primary'); // 强制横屏
// #endif
}
})
}
}
</script></pre></div>
<p>/pages/native/demo页面：</p>
<div class="jb51code"><pre class="brush:js;"><template>
<view class="">
跳转成功
</view>
</template>
<script setup>
import {
onLoad,
onReady,
onUnload
} from '@dcloudio/uni-app'
//页面卸载时切换为默认或者其他属性
onUnload(() => {
{
// #ifdef APP-PLUS
plus.screen.lockOrientation('default');
// #endif
}
})
</script>
<style>
</style></pre></div>
<p><strong>总结 </strong></p>
頁:
[1]