竖屏手游源码-后端H5横屏独特处理方案解读

随着公司知识付费业务的发展，产品发现横屏展示内容的效果和体验比竖屏更好。 我也觉得是真的~ 当我第一次收到这个请求时，我思考了一会儿。 在横屏状态下将整个页面旋转90度并不容易。 这不是结束了吗？ 结果，在真正开发的过程中，我发现事情并没有那么简单。 比如横屏时手势滑动的方向没有改变等等！ 于是我尝试去百度，最终没有找到满意的答案。 后来我决定自己去探索一下。 以下是我在开发过程中总结的一套做法。 做得比较好的朋友也可以分享一下，还请见谅。

疗效图

首先给大家看一下治疗图

疗效图一：

疗效图2：

疗效图三：

看起来挺高大上的~竖屏手游源码，不过这个疗效图是为原app设计的。 实际的H5页面在访问Momo时会有一个标题栏和一个顶部返回栏。 如右图所示，h5实际显示了疗效（android）：

项目需求及分析

项目要求

1、需求一：疗效图1中的星球必须能够左右滑动，并且滑动过程中还支持3D（远近缩放）疗效

2、需求2：疗效图2会有多个类，需要能够支持左右滑动

3、要求3：疗效图3的内容恰好占据一屏

分析

1、分析需求1：行星切换部分采用swiper实现。

2、分析需求2：看起来没什么难的，利用系统默认的滚动条就可以支持滚动。

3、分析需求3：嗯~，占个屏幕可不容易啊！ 直接按照疗效图的规格写就可以了。

实践总结

公司使用的是vue技术栈，所以下面的组件也是基于vue编写的。 了解了原理之后，相信无论使用哪个框架来实现，都不会有什么大的问题，所以不懂Vue的朋友也不必惊慌。

问题及解决方案

1、现在首先要做的是如何横向翻页？

h5没有横屏属性，所以横屏的效果只能通过页面元素的旋转来实现。 Transform:rotate(90deg);，所以我们首先要有一个横屏容器组件。 之后，将对应页面的内容全部放到这个容器上，页面会不会侧翻呢？

横屏容器组件代码如下：

 

 
 
 


export default {
	directives: {
 'horizontal-screen': {
 bind(el, binding, vnode){
 let self = vnode.context;
 
 function reset(init){
 
 let width = document.documentElement.clientWidth,
 height = document.documentElement.clientHeight;
 //在竖屏状态我们通过添加transform:rotate(90deg)，来让这个页面横过来
 if(window.orientation == null || window.orientation === 180 || window.orientation === 0){//竖屏状态
 el.style.webkitTransform = el.style.transform = `rotate(90deg)`;
 el.style.width = `${height}px`;
 el.style.height = `${width}px`;
 el.style.webkitTransformOrigin = el.style.transformOrigin = `${width / 2}px center`;
 //如果已经处于横屏状态就不做其他处理了
 }else if(window.orientation === 90 || window.orientation === -90){//横屏状态
 el.style.webkitTransform = el.style.transform = `rotate(0)`;
 el.style.width = `${width}px`;
 el.style.height = `${height}px`;
 }
 }
 reset(true);
 let timer = null;
 el.fn = function(e) {
 clearTimeout(timer);
 timer = setTimeout(reset, 300);
 }
 
 window.addEventListener('resize', el.fn, false);
 if("onorientationchange" in window){
 window.addEventListener('orientationchange', el.fn, false);
 }
 },
 unbind(el, binding, vnode){
 window.removeEventListener('resize', el.fn, false);
 window.removeEventListener('orientationchange', el.fn, false);
 }
 },
 }
}

现在页面已经横着了，先让星球能够左右切换吧。 可以直接添加swiper插件吗？

尝试引入swiper插件，运行时会发现手势反转了，上下滑动时内容会左右滑动。 由于我们现在只是水平翻页竖屏手游源码，所以x轴和y轴没有改变。 当我们上下滑动的时候，真正改变的是x轴，也就是普通页面的左右滑动。 我出于好奇检查了swiper的api，看看它是否支持这些操作参数。 结果没有找到，只好自己尝试改源码。 下面是更改代码后的部分截图：

添加了参数isReverse。 如果为 true，则 x 轴和 y 轴反转。 其实isReverse也需要判断特殊情况。 例如，原来的应用程序已经横屏了，尽管x轴和y轴不需要彼此相对。 这样我们的内容就可以正常的往脚趾方向滑动了。

暂定需求2的滚动形式是通过使用默认滚动条来解决的。 结果实现后发现右手滑动方向也反转了。 原来的手势颠倒了，如何调整？ 我在网上搜索并没有找到答案。 关键是问题不太好描述！ 由于之前使用过iscroll，所以可以模拟系统滚动条的疗效。 尝试添加到代码中，发现和swiper一样，拇指滑动的方向会反转。 最后只能自己在源码中减少一个参数。 总体来说，iscroll 改变的代码比 swiper 少很多。 只需要改一处即可，截图如下：

需求1和需求2都解决了，连接起来就解决了“最简单”的第三个需求。 虽然按照概念不需要做任何其他操作，但只需要按照疗效图的规范来写就可以了。

页面写好后，在笔记本上运行没有问题。 决定部署到测试环境，用手机运行看看。 原来两边的内容超出了屏幕范围。 是因为Momo中存在标题栏和顶部栏，导致内容超出了屏幕范围。 想想看，虽然不同长宽比的手机上没有标题栏和顶栏，但也会出现类似的情况。 如何解决这个问题？ 最后决定在横屏容器组件内部添加一个手动缩放组件，最终页面的框架图是这样的。 事实上，手动缩放组件只是在需要的地方添加。

我们看一下伸缩容器的代码。

	

		
	


//这块宽高比例根据效果图来设置
const DesignWidth = 375;
const DesignHeight = 667;
const DesignRatio = DesignWidth / DesignHeight;
function getScale(){
 let width = document.documentElement.clientWidth,
 height = document.documentElement.clientHeight;
 if(window.orientation == null || window.orientation === 180 || window.orientation === 0){//竖屏状态
 	
 }else {
 	[width, height] = [height, width];
 }
 let ratio = width / height;
 let scale;
 //通过计算实际手机宽高比和效果图的宽高比得出最终的所让比例
 if(ratio > DesignRatio){
 	scale = height / (width / DesignRatio);
 }else if(ratio < DesignRatio){
 	scale = width / (height * DesignRatio);
 }else{
 	scale = 1;
 }
 return scale;
}
export default {
 data(){
 return {
 
 }
 },
 computed: {
 scaleWrapStyle(){
 let scale = getScale();
 let scaleStr = `scale(${scale})`;
 return { 'transform': scaleStr, '-webkit-transform': scaleStr };
 }
 },
}


.scale-wrap{
	width: 100%;
	height:100%;
	display: flex;
	transform-origin: left center;
}

至此，我们已经实现了一套针对横屏需求的解决方案~