效果图
首先给大家看看效果图
效果图一:
效果图二:
效果图三:
看上去还是挺高大上的吧～，不过这效果图是针对app原生设计的，实际H5页面在微信里面访问还会有标题栏和底部返回栏，如下图h5实际展示效果（android）：
项目需求及分析
项目需求
1、需求一：效果图一的星球要能支持左右滑动，滑动过程中还要能支持3D（远近缩放）的效果
2、需求二：效果图二会有多节课需要能支持左右滑动
3、需求三：效果图三内容要刚好占一屏
分析
1、分析需求一：星球切换部分使用swiper来实现。
2、分析需求二：好像没什么难的，使用系统默认的滚动条就可以支持滚动了。
3、分析需求三：嗯～，占一屏还不简单！
直接按效果图尺寸写就好了。
实践总结
公司使用的是vue技术栈，所以下面的组件也是基于vue来写的。懂了原理我相信不管用什么框架去实现都不会有太大问题，所以不懂vue的同学也不用慌。
问题及解决方案
1、现在首先要做的第一件事情就是怎样先让页面横过来？
h5没有横屏属性那只能通过旋转页面的元素来达到横屏的效果了 transform: rotate(90deg); ，所以我们要首先要有一个 横屏容器 组件。然后把对应页面的内容都放在这个容器里面页面是不是就横过来了？
横屏容器组件代码如下：
<template> <section v-horizontal-screen @touchmove.prevent> <!-- 页面具体内容 --> <slot></slot> </section></template><script>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); } }, }}</script>
现在页面已经横过来，接下来先让星球能够左右切换吧。是不是直接加入swiper插件就可以了？
尝试引入swiper插件，然后运行起来的时候会发现，手势反了，上下滑动的时候内容才会左右滑动。因为现在我们只是把页面横过来了，x轴和y轴并没有变。当我们上下滑动的时候实际上改变的是x轴，也就是正常页面的左右滑动。带着好奇心查了一下swiper的api看看是否有支持这种操作参数。结果没有查到，只好自己尝试去修改源码了。下面是修改代码后的部分截图：
增加了一个参数isReverse，如果为true则x轴和y轴反一反。当然isReverse还要判断一下特殊情况比如本来app就已经横屏了其实就没必要x轴y轴互反了。这样我们的内容又可以正常跟着手指方向滑动了。
前面暂定需求二的滚动方式采用默认滚动条来解决，结果实现出来之后发现手指滑动方向也是反。原生的手势反了，改怎么调整呢？网上查了一通没有找到答案，关键这问题也不是很好描述！
因为之前有使用过iscroll，可以模拟系统滚动条的效果。尝试加入到代码中，发现和swiper一样也会出现手指滑动方向反的情况。最后也只能自己去源码中增加一个参数了。整体对比iscroll改动的代码要比swiper少的多。只需要改一个地方就可以了，截图如下：
需求一和需求二都解决了，接下来来解决“最简单”的第三个需求。其实按照设想不用做任何其它操作，只需要按照效果图的尺寸写就好了。
页面写好了，在电脑上跑也没什么问题。决定部署到测试环境用手机跑一下看看。结果发现右侧内容超出屏幕范围了。是因为在微信中有标题栏和底部栏，导致内容超出了屏幕范围。联想一下其实在不同长宽比的手机上 其实即使不存在标题栏和底部栏 其实也会有类似情况。这该怎么解决呢？最后决定在横屏容器组件内部再加入一个自动缩放组件，最后页面的框架图长下面这样。当然自动缩放组件只在需要的地方加入。
接下来一起看看比例缩放容器的代码吧。
<template><div class=\"scale-wrap\" :style=\"scaleWrapStyle\"><slot></slot></div></template><script>//这块宽高比例根据效果图来设置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 }; } },}</script><style lang=\"less\" scoped>.scale-wrap{width: 100%;height:100%;display: flex;transform-origin: left center;}</style>
到此为止我们已经实现了对横屏需求处理的一套方案～
