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>
相关推荐
web_Hsir2 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir2 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa3 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
耶啵奶膘6 小时前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界20 小时前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨21 小时前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆21 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na0121 小时前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir1 天前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
平凡的阿泽1 天前
uniapp编译的app在ios上内存泄漏了
uni-app