uniapp中使用mixins控制横屏竖屏

概念

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

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

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

js 复制代码
import lockScreen from '@/mixins/lockScreen.js'

// 注册全局混入
Vue.mixin(lockScreen)

在页面中使用

js 复制代码
// /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>
相关推荐
十五春会15 小时前
【uniapp】App平台展示pdf文件
pdf·uni-app
请叫我欧皇i16 小时前
保姆级教程vscode创建uniapp vue3+ts+pinia项目并实现自动导入、打包功能
ide·vscode·uni-app
海鸥两三16 小时前
Uni-App(Vue3 + TypeScript)项目结构详解 ------ 以 Lighting-UniApp 为例,提供源代码
vue.js·typescript·uni-app·1024程序员节
知识分享小能手16 小时前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手16 小时前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生18 小时前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
2501_915918411 天前
iOS 26 查看电池容量与健康状态 多工具组合的工程实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915909061 天前
iOS 架构设计全解析 从MVC到MVVM与使用 开心上架 跨平台发布 免Mac
android·ios·小程序·https·uni-app·iphone·webview
2501_916008891 天前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
2501_915921431 天前
“HTTPS 个人化”实战,个人站点与设备调试的部署、验证与抓包排查方法
网络协议·http·ios·小程序·https·uni-app·iphone