uniapp中使用mixins控制横屏竖屏

最新推荐文章于 2025-02-25 21:35:20 发布

胡西风_foxww

最新推荐文章于 2025-02-25 21:35:20 发布

阅读量771

点赞数 2

分类专栏： # uniapp 文章标签： uni-app 横屏竖屏

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/my_study_everyday/article/details/136914987

版权

uniapp 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用mixins来管理屏幕方向锁定功能，如横屏、竖屏切换，并在Webview页面加载和卸载时自动调整屏幕方向。同时展示了如何在页面组件中调用这些方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概念

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

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

export default {
	data() {
		return {};
	},
	onLoad() {
		// #ifndef H5
		plus.screen.lockOrientation('portrait-primary');
		// #endif
	},
	onShow: function() {},
	onUnload() {},
	methods: {
		// 设置屏幕方向为横屏
		setScreenAuto() {
			// #ifndef H5
			plus.screen.lockOrientation('auto');
			// #endif
		},
		// 设置屏幕方向为横屏
		setScreenLandscape() {
			// #ifndef H5
			plus.screen.lockOrientation('landscape-primary');
			// #endif
		},
		// 设置屏幕方向为竖屏
		setScreenPortrait() {
			// #ifndef H5
			plus.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>