uniapp中使用mixins控制横屏竖屏

本文主要是介绍uniapp中使用mixins控制横屏竖屏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

概念

mixins概念和用法同vue在此不在赘述。

在根目录下创建mixins目录，在mixins目录下创建lockScreen.js

export default {data() {return {};},onLoad() {// #ifndef H5plus.screen.lockOrientation('portrait-primary');// #endif},onShow: function() {},onUnload() {},methods: {// 设置屏幕方向为横屏setScreenAuto() {// #ifndef H5plus.screen.lockOrientation('auto');// #endif},// 设置屏幕方向为横屏setScreenLandscape() {// #ifndef H5plus.screen.lockOrientation('landscape-primary');// #endif},// 设置屏幕方向为竖屏setScreenPortrait() {// #ifndef H5plus.screen.lockOrientation('portrait-primary');// #endif},kaifazhong() {uni.showToast({title: "公测暂未开放",icon: "none"})}}
};

然后在main.js中引入mixins

import lockScreen from '@/mixins/lockScreen.js'// 注册全局混入
Vue.mixin(lockScreen)

在页面中使用

// /pages/webview/webview
<template><view><web-view :src="webUrl" frameborder="0"style="position: absolute; left: 0px; top: 0; height: 100%;"></web-view></view>
</template><script>export default {data() {return {webUrl: ''}},onLoad(params) {this.setScreenAuto();this.webUrl = params.url},onUnload() {this.setScreenPortrait()},methods: {}}
</script><style lang="scss" scoped>
::-webkit-scrollbar {width: 0;height: 0;
}
</style>