未加星标

前端 H5 横屏 独特处理方案详解

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

随着公司知识付费业务的发展,产品发现横屏展示内容的效果和体验都要比竖屏要来的好。我也感觉确实是这样的~。刚接到这个需求的时候,稍微想了一下,横屏这还不简单直接把整个页面旋转90度,不就完事了?结果真正开发的过程中发现并没有这么简单。比如屏幕横过来手势滑动的方向没有变过来等等!于是尝试去百度了一下最终并没有搜到满意的答案。后来决定自己摸索一下,下面是我开发过程中总结了一套做法,有更好的做好的同学也可以分享指正。

效果图 首先给大家看看效果图

效果图一:


前端 H5 横屏 独特处理方案详解

效果图二:


前端 H5 横屏 独特处理方案详解

效果图三:


前端 H5 横屏 独特处理方案详解

看上去还是挺高大上的吧~,不过这效果图是针对app原生设计的,实际H5页面在微信里面访问还会有标题栏和底部返回栏,如下图h5实际展示效果(android):


前端 H5 横屏 独特处理方案详解

大家可以进去先体验一下(用微信访问),项目地址 m.ngmm365.com/mathbox/ind… 页面加载完毕之后,点击试学按钮即可进入横屏页面。

项目需求及分析 项目需求

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看看是否有支持这种操作参数。结果没有查到,只好自己尝试去修改源码了。下面是修改代码后的部分截图:


前端 H5 横屏 独特处理方案详解

增加了一个参数isReverse,如果为true则x轴和y轴反一反。当然isReverse还要判断一下特殊情况比如本来app就已经横屏了其实就没必要x轴y轴互反了。这样我们的内容又可以正常跟着手指方向滑动了。

前面暂定需求二的滚动方式采用默认滚动条来解决,结果实现出来之后发现手指滑动方向也是反。原生的手势反了,改怎么调整呢?网上查了一通没有找到答案,关键这问题也不是很好描述!因为之前有使用过iscroll,可以模拟系统滚动条的效果。尝试加入到代码中,发现和swiper一样也会出现手指滑动方向反的情况。最后也只能自己去源码中增加一个参数了。整体对比iscroll改动的代码要比swiper少的多。只需要改一个地方就可以了,截图如下:


前端 H5 横屏 独特处理方案详解

需求一和需求二都解决了,接下来来解决“最简单”的第三个需求。其实按照设想不用做任何其它操作,只需要按照效果图的尺寸写就好了。

页面写好了,在电脑上跑也没什么问题。决定部署到测试环境用手机跑一下看看。结果发现右侧内容超出屏幕范围了。是因为在微信中有标题栏和底部栏,导致内容超出了屏幕范围。联想一下其实在不同长宽比的手机上 其实即使不存在标题栏和底部栏 其实也会有类似情况。这该怎么解决呢?最后决定在横屏容器组件内部再加入一个自动缩放组件,最后页面的框架图长下面这样。当然自动缩放组件只在需要的地方加入。


前端 H5 横屏 独特处理方案详解

接下来一起看看比例缩放容器的代码吧。

<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> 复制代码

到此为止我们已经实现了对横屏需求处理的一套方案~

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:前端 H5 横屏 独特处理方案详解
本站链接:https://www.codesec.net/view/610884.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(47)