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>
相关推荐
小徐_23331 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq2 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app