摘要：移动端开发采用单屏垂直滑动页面中，某页内容高度超出屏幕高度解决办法当产品给我原型的时候，我觉得这是一个普通的专题，为了赶时间下班前给的设计稿，产品姐姐说，明早要上。
移动端开发HTML5（H5）采用SwiperJS单屏垂直滑动页面中，某页内容高度超出屏幕高度解决办法
当产品给我原型的时候，我觉得这是一个普通的专题，为了赶时间（下班前给的设计稿，产品姐姐说，明早要上！）。当我下班时拿到设计师给出了基于iPhone6分辨率的设计稿时，我陷入了沉思。
不得不说，整体设计十分饱满，看起来内容很丰富。在750*1334分辨率下的图片显示完美。
然而，不是所有手机看到的都是这个图的模样，最重要的是不同浏览器有不同高度的标题栏，底部有菜单栏，还有甚者，还有虚拟按键栏（某些安卓手机例如Meizu MX3）。作为单屏垂直滑动的页面，如果能完美呈现如此饱满的内容，并且不会出BUG呢。
废话少说，目前的状况就是：这个单屏滑动的页面中，存在部分slide的内容根本无法一屏刚好显示完，因此，在这些高度大于浏览器可视窗高度的slide内，需要一个上下滑动来查看该slide全部内容。而两个上下滑动的操作又会产生冲突。对于这个问题该如何解决呢？经过这几天的研究，我目前得出来了两个方案。现在来介绍一下：
方案一：在超出可视高度的swiper-slide的内通过设置allowTouchMove参数来开启/禁用滑屏切换的操作该方案内容较长，废话较多，是个人尝试解决问题的一点心得，若无兴趣可直接看方案二
开发流程和思考：首先建议下载demo-1在本地，通过Chrome手机模拟或者手机（手机预览需要自行开本地服务器）运行一下看看效果，体验一下实际使用感受和觉得有哪些问题。
由于整个页面仅花了几个小时完成，大部分时间用于阅读swiperjs官方文档解决该问题，因此页面代码相对混乱，并且方案一并非最优化方案，因此不再优化。其实也因为对于swiperjs的API不够熟悉，所以写了很多不太优化的冗余代码，所以DEMO-1主要介绍我的一些开发过程中勉强实现效果的想法。
前奏：开发ing：坑爹的设计啊，又不是人人都是iPhone6！T_T。设计稿单屏显示效果好，时间不够设计是不可能改了，找产品聊天，说，既然都单屏滑动，这个设计内容太饱和，我压缩一下，尽量大部分设备能显示完整内容区域，产品不同意。可是苦了我这个小前端。口头上对产品说，那你找个内容超出屏幕高度的实例我看看，我都没见过！心里还是软软的，要不试试吧，说不定很容易呢。
先按照SwiperJs的DEMO搭好页面，做好样式。反正赶时间，全部切整图，细节不管了。很快页面雏形有了。此刻没有开始的loading的。
接下来做滑动，很显然，的确按照设计稿一屏根本显示不完，加上该死的各种状态栏占用的高度，实际可视区域很小。然而怎么获取到每屏内部的高度呢，有些屏是整张背景图，是没有高度的，这种，好说，我直接写高宽最小100%。有的有内容，但是如何检测到呢，首先每个slide里面都要有一个wrap，我这里用的类名page，所有样式都是基于page来的，然后页面加载的时候，在底部创建了个临时的div，遍历有几个slide，每次都将slide写入临时div，然后获取到真实高度，再添加一个realheight属性给对应的slide，遍历结束后清除临时div，这样每个slide的真实高度就有了。
接下来，每次滑倒对应的slide的时候，开始检测它的内容高度realheight，是否超出了可视区高度，如果超出，我就阻止了allowTouchMove，如下：
mySwiper.allowTouchMove = false;
这下可以内部滚动了，但是到了底我要滑到下一屏咋办，要释放allowTouchMove，于是又在这里加了一个滚动监听事件，当滚到底部时，设置为true，当然同样到滑倒顶部也要设置true，以便返回上一屏，止于此处的具体优化就不多说了。原理大概就是这样~
似乎都调试好了，其实还有个隐藏的问题，就是我这个页面的图片较多，网速较差的情况下，图片未能加载完，真实高度是无法获取到的。于是又要想办法弄了一个图片加载结束后才开始执行其他脚本。这里赶时间也就随便找了一段抄过来了，还挺好用。抄自Can I sync up multiple image onload calls?，顺便又加了个简单的loading页面。反复测试了几次，看起来勉强还是可以的，于是找产品聊了聊，好在基本上过了。
总结：虽说，其实代码方面有很多问题，但是有时候工作上速度比质量更重要，也就先这样上线了~同样的我在上线后有了时间的情况下，继续寻求更佳的解决办法，于是才找到方案二~
方案二：作者给出的完美方案（4.x测试通过 ）通过监听swiperjs内部的touchstart和touchmove获取到手指滑动的垂直高度差，判断滑动手势的方向，并获取slide.scrollHeight和slide.offsetHeight值（也就是DEMO-1中的获取页面可视区域高度的方法。），以便得到正确的是否为内部滚动检测。如果是，则阻止touchmove事件，我当时完全不知道这个阻止了就能阻止切屏了。
当然，css对应的也要写好。
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
background: #f1f1f1;
color: #000;
text-align: center;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
其实看一下源码就很清楚了。在目前，我未发现任何BUG。也算是完美了SwiperJS的另一个官方未有展示的功能~
最后附上demo-2代码和页面线上效果
写在最后其实，有时候，自己遇到的问题，其实很多人都遇到过，虽然在处理这个问题上，百度的确搜不到相关的信息，甚至是这样的问题，我都不知道该如何描述清楚，以便搜索，所幸google了一下swiper slide content overflow之类关键词查到了SwiperJS作者给出的答案，实在幸运，后来该页面在优化过程中我重写用了DEMO-2的方案，心情也是舒畅了许多。
同时，我也查过SF，关于SwiperJS的一些类似的资料，的确也没有找到，不知道我写的这个是否能给相关开发的朋友带来帮助，或者其实大家还有更好的方法，欢迎留言共同学习探讨~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/60266.html
摘要：移动端报表使用方法安装好插件后，在浏览器中调用时，需要在报表路径后面加上参数。另外移动端的插件，图表是只支持显示新图表。 HTML5报表插件安装及使用编辑 插件安装插件网址以及设计器插件安装方法和服务器安装插件的方法可以官网上面搜索，这里就不做详细介绍了。 移动端HTML5报表使用方法安装好插件后，在浏览器中调用时，需要在报表路径后面加上参数op=h5。但是PC端不完全支持H5效果。移...
摘要：移动端报表使用方法安装好插件后，在浏览器中调用时，需要在报表路径后面加上参数。另外移动端的插件，图表是只支持显示新图表。 HTML5报表插件安装及使用编辑 插件安装插件网址以及设计器插件安装方法和服务器安装插件的方法可以官网上面搜索，这里就不做详细介绍了。 移动端HTML5报表使用方法安装好插件后，在浏览器中调用时，需要在报表路径后面加上参数op=h5。但是PC端不完全支持H5效果。移...
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
阅读 3231·2023-04-26 00:16
阅读 1195·2021-11-25 09:43
阅读 3564·2021-11-23 09:51
阅读 930·2021-11-22 09:34
阅读 2623·2021-10-14 09:43
阅读 2791·2021-09-24 09:55
阅读 492·2021-09-22 15:45
阅读 1137·2021-09-08 09:36
