移动端开发HTML5(H5)使用SwiperJS单屏竖滑页面，某页内容高度超过屏幕高度解决办法之前给的设计稿，产品姐说了，明天早上发布！）。下班拿到设计师给的基于iPhone6分辨率的设计稿时，我陷入了沉思。不得不说整体的设计非常的饱满，看起来内容也很丰富。750*1334分辨率下的图片完美显示。但是，并非所有手机都看到相同的图片。最重要的是，不同的浏览器有不同高度的标题栏、底部的菜单栏，甚至还有虚拟按钮栏（部分安卓手机如魅族MX3）。作为一个单屏垂直滑动的页面，如果能完美呈现这样的全内容，就不会出现bug。废话不多说，目前的情况是：在这个单屏滑动页面中，有些滑动内容根本无法一屏显示。因此，在这些高度大于浏览器可见窗口高度的幻灯片中，需要上下滑动。查看此幻灯片的完整内容。而且上下滑动这两个操作会产生冲突。如何解决这个问题呢？经过几天的研究，我想出了两个解决方案。下面介绍一下：方案一：通过在swiper-slide中设置allowTouchMove参数超出可见高度，开启/关闭滑屏切换操作。这个解决方案内容很长，废话也不少。不感兴趣的可以直接看方案2的开发过程和思路：首先建议在本地下载demo-1，通过Chrome手机模拟或者手机运行（需要开本地服务器用于手机预览）看效果，体验实际使用体验以及你觉得有什么问题。由于整个页面只花了几个小时就完成了，大部分时间都花在阅读swiperjs官方文档来解决这个问题，所以页面代码比较乱，而且方案一不是最优方案，所以不再优化.其实因为对swiperjs的API不够熟悉，写了很多没有优化的冗余代码，所以DEMO-1主要介绍自己在开发过程中勉强实现效果的一些想法。前言：糟糕的设计，不是人人都是iPhone6！T_T。设计稿单屏展示效果好，时间不够是不可能改设计的。和产品聊天说，既然都是单屏滑动，设计内容太饱和了。我会对其进行压缩，以便大多数设备可以显示完整的内容区域。产品不同意。但是我却苦于这个小前端。口头对产品说，那你找一个内容超出屏幕高度的例子，我看看，我没见过！心还是软的，不如试一试，说不定会容易。开发：先根据SwiperJsDEMO搭建页面，做好样式。反正时间仓促，把图都删了，忽略了细节。很快页面的雏形就形成了。目前没有开始加载。接下来，滑动。显然，按照设计稿，一屏是根本无法显示的。除了各种状态栏占用的高度外，实际可见区域很小。但是，如何获得每个屏幕内的高度？有些屏幕是整个背景图像，没有高度。为此，比方说，我直接写最小高度和宽度为100%。有的是有内容，但是怎么检测呢，首先每张幻灯片都要有一个wrap，我这里用的类名是page，所有的样式都是基于page的，然后在页面加载的时候，wrap是在底部创建临时div，遍历若干张幻灯片，每次将幻灯片写入临时div，然后获取真实高度，然后给对应的幻灯片添加一个realheight属性，遍历完成后清空临时div，使得真实高度每张幻灯片都有。接下来，对应的slide每滑动一次，我就开始检测它的内容高度realheight是否超过可见区域的高度。如果超过了，我就阻止allowTouchMove，如下：mySwiper.allowTouchMove=false;这个可以内部滚动，但是想滑到下一屏怎么办？我需要释放allowTouchMove，所以我在这里添加了一个滚动监听事件。滚动到底部的时候设置为true，当然也设置为滑动顶部为true，从而回到上一画面，具体优化这里就不多说了。原理大概是这样的~看来一切都调试好了。其实还有一个隐藏的问题，就是我页面上的图片很多。网速差时，图片加载不全，无法获取真实身高。所以我找到了一种在开始执行其他脚本之前先加载图片的方法。赶时间到这里，随便找了一段抄下来，还是蛮有用的。复制自CanIsyncupmultipleimageonloadcalls?，顺便添加了一个简单的加载页面。反复测试了几次，好像勉强可以，就和产品聊了聊，还好基本通过了。总结：虽然代码其实有很多问题，但有时候工作的速度比质量更重要，所以我会先上线~同样，上线后有空的时候，我会继续寻求更好的解决方案。于是找到方案二~方案二：作者给出的完美方案（4.x测试通过）通过监听swiperjs内部的touchstart和touchmove获取手指滑动的垂直高度差，判断滑动手势的方向，以及获取slide.scrollHeight和slide.offsetHeight值（即DEMO-1中获取页面可见区域高度的方法。），以便正确检测是否为内滚动.如果是，则阻止touchmove事件。我不知道这样可以防止屏幕被切割。当然相应的css也要写好。.swiper-container{宽度：100%；高度：100%；}.swiper-slide{背景：#f1f1f1；颜色：#000；文本对齐：居中；溢出：自动；-webkit-溢出滚动：触摸；}其实看源码就很清楚了。到目前为止，我还没有发现任何错误。算得上是完美了，SwiperJS的又一个官方功能没有展示出来~最后附上demo-2代码和页面在线效果。其实有的时候，很多人都遇到过我遇到的问题，虽然在处理这个问题的时候，百度确实找不到相关的资料，甚至这样的问题，我也不知道怎么描述清楚，方便搜索.幸运的是，我用swiperslidecontentoverflow等关键词搜索了一下，找到了SwiperJS的作者。我得到的答案真的很幸运。后来在这个页面的优化过程中，我重写并使用了DEMO-2的方案，感觉舒服多了。同时我也查了顺丰，也没有查到类似SwiperJS的资料。不知道我写的对相关开发的朋友有没有帮助，或者其实大家有更好的方法，欢迎大家留言一起学习~
