vue 如何实现手机横屏功能

功能背景

有些需求需要手动实现横屏功能,比如点击一个横屏的图标将整个页面90度翻转,再点击退出横屏回到正常页面。

实现思路

一拿到这个需求很可能就被吓到了,但简单来说,就是点击横屏按钮跳转一个新页面,通过 css样式 的翻转样式来实现,主要是计算横屏的宽高比较麻烦,下面来看具体的代码实现。

关键代码:

c 复制代码
<view class="box">
	<view class="jxcLandscape" :style="{width:newHeight+'px',height:newWidth+'px'}">
		<view class="title_H">
			<view @click="handleBack" class="image_H">
				<img style="width:40rpx;height: 40rpx;margin-right: 8rpx;" src="@/static/screen.png" />
				退出横屏
			</view>
		</view>
		
		<!--主要内容区-->
	</view>
</view>

css 样式:

c 复制代码
.box{
		position: relative;
		width: 100%;
		height: 100vh;
		overscroll-behavior: none;
	}
	.jxcLandscape{
		padding: 10px;
		transform: rotate(90deg); // 关键代码
		transform-origin: 0% 0%; // 关键代码
		position: absolute;
		top: 0%;
		left: 100%;
		margin-left: 0;
			
	}

js 方法:

c 复制代码
onLoad(){
	let that=this
	uni.getSystemInfo({
		success: function (res) {
			that.newWidth=res.windowWidth
			that.tablenewWidth=res.windowWidth-50
			if(res.platform=='android'){
				this.getStatusBarHeight((height) => {
					that.barHeight = height
					that.newHeight=res.windowHeight-that.barHeight
				})
			}else{
				// 这是苹果操作系统
				that.newHeight=res.windowHeight
			}
		}
	})
},
methods:{
	getStatusBarHeight(){
		let barHeight = 51
		if (uni.getSystemInfoSync().platform == "ios") {
			// ios {}可传参 
			this.callhandler('getStatusBarHeight', "", callBack);
		}
		if (uni.getSystemInfoSync().platform == "android") {
			// Android
			if (window.webkit) {
				barHeight = window.webkit.getStatusBarHeight()
				callBack(barHeight)
			}
		}
	},
	callhandler(name, data, callback) {
		setupWebViewJavascriptBridge(function(bridge) {
			bridge.callHandler(name, data, callback)
		})
	},
	setupWebViewJavascriptBridge(callback) {
		if (window.WebViewJavascriptBridge) {
			return callback(window.WebViewJavascriptBridge)
		}
		if (window.WVJBCallbacks) {
			return window.WVJBCallbacks.push(callback)
		}
		window.WVJBCallbacks = [callback]
		let WVJBIframe = document.createElement('iframe')
		WVJBIframe.style.display = 'none'
		WVJBIframe.src = 'https://__bridge_loaded__'
		document.documentElement.appendChild(WVJBIframe)
		setTimeout(() => {
			document.documentElement.removeChild(WVJBIframe)
		}, 0)
	}
}
相关推荐
fruge2 小时前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
知识分享小能手5 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
MC丶科7 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
lijun_xiao20099 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔9 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼9 小时前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔9 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔9 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀9 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP10 小时前
Ajax 详解
java·前端·ajax·javaweb