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)
	}
}
相关推荐
空山新雨(大队长)7 分钟前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术42 分钟前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫42 分钟前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓42 分钟前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java42 分钟前
CSS的文本样式
前端·css
前端小趴菜0543 分钟前
css - 滤镜
前端·css
祈祷苍天赐我java之术43 分钟前
理解 CSS 浮动技术
前端·css
索迪迈科技1 小时前
Flex布局——详解
前端·html·css3·html5
咔咔一顿操作1 小时前
【CSS 3D 实战】从零实现旋转立方体:理解 3D 空间的核心原理
前端·css·3d·css3