最近网易的露脸真是越来越频繁，动不动就用H5支配微信朋友圈，让我们防不胜防。

特别是前阵子推出的「网易新闻丨各有态度」，短短一天就被100多万人打开，简直刷新了大家对H5的认知，不信你看——

你会看到它长得很像APP，有分类标签和可下滑刷新的列表，又有以假乱真的新闻频道。不认真看，还以为进了网易新闻的官网呢。离谱的是，居然不用下载安装...

对于这种形态的H5，业内有一个专业名词——Web APP。

这类即开即用网页小程序现在可谓是相当炙手可热，微信小程序，谷歌的支持免安装应用，都可以说是Web APP。

或许未来它会火得一塌糊涂？提前学会制作，说不定能抢在风口前分一杯羹！

接下来，以3.0版 iH5.cn 为创作工具，以「网易新闻丨各有态度」为复现案例，为大家详细分析这种H5的交互实现方法。在详细讲教程前，先看看复现的效果——

PC端打开：http://5f630a50018f.vt.iamh5.cn/v3/idea/tK5Voiu

如在PC端打开，需按F12进入开发者工具，再刷新，才能模拟手机界面的显示效果~

一、解剖「网易新闻丨各有态度」

亲自体验一番的话，可以很直观地将这个H5划分为两个层级，分别是初始打开页以及滑动页。其中，滑动页有三个滑动节点，大致将整个内容页分为三部分：

除了用滑动时间轴，想要完整复现「网易新闻|各有态度」类的Web APP，最关键的在于设计动态变化的内容，也就是这个H5的文章展示部分。

这块的复现需要运用iH5 3.0版工具的新功能，主要是相对定位容器、数据单元、数据表这三个组件。

因为目前他们的3.0版还处在内测期，所以这些功能需要先激活账号才能使用，如果想玩的朋友，可以私聊我，我手上还有几个空余的内测码哈~

如果你想自食其力也行，我从他们官网扒来了发内测码的H5，你自己拿：

屏住呼吸，接下来是完整的复现教程！

二、可上下滑动的长页面

1.视差+遮罩效果的初始页

初始页的两个交互细节挺有意思的，文字在淡入显示的同时，背景图在慢慢往外延伸，营造出一种颇有视觉前后对比的视差效果。

（1）文字淡入

点击左侧的“文本”组件，分4行排好，接着给4个文本添加“淡入”的动效。

然后分别修改这4个动效的“启用延时”，依次是0S、1S、2S、3S，同时都打开“开始前隐藏”，目的是为了让这4个动效能够依次淡入。

特别地，3.0版工具支持编辑动效，如果你觉得淡入的效果不够完美，你可以点击编辑动效，在时间轴下自行调整。

（2）背景图往外延伸

规律性的变化可以用“时间轴”功能。在页面中添加一个大概5S的时间轴，上传背景图，然后为其添加轨迹，时间轴首尾设置关键帧即可。

这里给新手提个醒，设置关键帧的时候需要先选中关键帧，再调整X/Y坐标、宽高。

所以首帧按舞台大小顶格设置，尾帧先将宽高等比放大5倍，然后拖动调整至合适的位置就可以实现从中间往外延伸的效果了。

最后打开自动播放即可。

2.三个滑动节点

（1）会自动暂停的滑动时间轴

点击左侧的“滑动时间轴”控件，在工作区拖拽出一片区域，就能创建可滑动的区域。

因为这个H5是全屏滑动，因此我们需要将滑动时间轴调整为全屏，顶格左上角堆砌坐标（0，0），尺寸推荐640*1040px。

紧接着，选中滑动时间轴，在右侧找到“时间节点”控件，为滑动时间轴添加三个节点，标记的时间分别是0S、2S、4S，并打开“暂停点”功能。

时间节点是一个虚拟的节点，它类似水龙头的开关阀，当我们滑动至暂停点时，它会自动暂停，你需要再滑动它才会继续播。

至于两个暂停点之间的自动跳转，打开滑动时间轴的“自动跳转控制点”即可。如果想让跳转过程更快，可以修改它后面的“时长”。推荐数值0~1，数值越小，跳转越快。

（2）搭建整体框架

这个H5的整体框架如上图，屏幕外的内容，是暂停点之间滑动控制出现/消失的。比如说，当我们往上滑的时候，节点2的内容会从屏幕外出现；往下滑，节点2的内容会反向消失。

因为滑动时间轴可以剪切，屏幕外的素材会被自动剪切隐藏，因此无需担心屏幕外的内容会影响体验。

三、可左右滑动的局部

从原案例中，当我们向下滑到节点2时，会出现一个可以左右滑动的局部素材，而且左右滑动的素材是循环的，这个该怎么做呢？

理论上可以再加滑动时间轴，但多条滑动时间轴会导致轨迹复杂混乱，不利于初学者操作。

因此我们换个角度，用时间轴+透明按钮来控制这左右滑动的局部。

（1）用透明按钮控制时间轴

在编辑区域下拉拽去一个合适大小的透明按钮。

这个透明按钮需要跟随透明按钮的第二个滑动节点，从屏幕外进入屏幕内。

可左右滑动的素材数有8个，因此需要新增一个时长为8S的时间轴，时长=素材数（N）。

为了方便管理，可以把素材分别放进三个容器，成为时间轴的子对象，调整好坐标位置。

这样做是为了让三组素材能够受同一滑动操作控制，效果同步。

需要特别注意的是，文字和图片的素材，都需要一一对应。那么，如何用透明按钮控制时间轴，且让他们循环？

（2）循环播放的原理把握

透明按钮的事件具备向左/向右滑的触发条件，所以我们以此判断手指动作，触发时间轴的播放。

如果想让素材循环，需要具备两个条件：

A.时间轴能够正向&反向播放

B.素材首尾相连

正向&反向播放好办，用事件控制左滑=正向播放，右滑=反向播放即可。

至于素材首尾相连，需要注意什么？

上面这张图模拟出循环的含义，手机框即表示你能看到的区域，框外的即表示待轮播的素材。

首先你会发现屏幕外准备着一组一模一样的素材，素材间存在相互取代位置的关系，无论正/反向播放，在保证首尾帧坐标一样的前提下，就能调整属性达到循环效果——

A.为每个素材添加轨迹，时间每隔1S，位移一次；

B.每个节点的位置需要相互取代，比如a素材的坐标为（X,Y），那么b素材取代a的位置时，坐标也为（X,Y）；

C.如此类推，c素材取代b位置时，坐标即为b位移前的坐标。

完成轨迹操作后，为时间轴的每一秒添加时间标记（共8个时间标记），打开暂停点即可。

四、会自动排版的底层文章（重点）

在原H5里，最后的文章会保持固定的板式，往下拖动会刷新获取新的内容，本质上是Flex网页布局设计，这是怎么做的呢？

需要用到iH5 3.0的新功能，主要是相对定位容器、数据单元、数据表。

（1）相辅相成的仨功能

对前端有一定了解的同学应该不陌生，它本质上是一个排版容器，可以配合着绝对定位容器、表格、数据单元、数据表等一系列功能来使用。

在页面下新建相对容器，它的属性是这面这样的：

它更像是一个印刷机，借助它可以自动完成排版，不用像旧版那样一个个去设置位置。

而辅助用的数据单元，就像是刷子，在它下面创建数据模板，它就能自动生成N个版式一模一样的内容。所以图片、文本等内容通常放在数据单元下。

充当油墨角色的是数据表，我们事先将所有图片素材、文本都上传到数据表中，由数据单元上的图片、文本绑定数据来源，即可批量自动生成了。

（2）相对定位容器的大小含义

相对定位容器没有固定的宽高，只有百分比，它会根据父对象的大小而自动覆盖。比如在页面下添加相对定位容器，那么它会自动以100%覆盖舞台。

因此我们需要借助一个容器，调整合适大小后，添加相对定位容器作为容器的子对象，此时它的尺寸就是容器的大小。

仔细观察原案例，不难需要预设的版式包括一张图片、一段文字、一张固定的底图。

明白这一串原理，下面就是调整参数和上传素材了。

（3）制作版式

在相对定位容器下新增一个数据单元，数据单元是虚拟的容器，它不能直接被选中。

因此它的位置需要根据实际调整：

调位置的时候，大家可以先给数据单元设置一个任意背景颜色，这样能更直观地控制大小和位置。

紧接着，我们在数据单元下添加一个空白的图片、空白的文本、固定的白色底图，并将白色底图置于底层，调整这三个元素的位置，效果如下图所示：

（4）在数据表中上传数据

正如上文所说，图片和文本都来自一个数据表，把内容按分类上传即可。

特别需要注意的是，因为案例中素材分了几个类别，所以我们在上传的时候需要做分类标记，这样才能输出被标记的准确内容。

为什么偏偏选用数据表来装载数据呢，数据库不可以吗？

A 数据体量足够大时，数据表支持后台调换数据顺序；

B 数据表支持批量删除数据，更有利于数据更新。

特别是类似网易这个H5，或者产品展示型H5，数据体量超过100个，使用数据表会更适合。

（2）绑定数据，自动排版

在数据上传完之后，我们回到相对定位容器的图片和文本，在属性栏中选择数据来源，点击数据表后分别选中图片、文本。

（6）不同分类的数据输出

原案例中，数据是根据滑动来输出的，比如当前显示的是“家居”，会输出“家居”分类的数据，左右滑动后，数据会根据分类而刷新。

上面的步骤中，分类轮播的时间轴已经设置了8个时间标记，每个标记对应一个分类，因此我们可以用标记来触发数据输出。

做法是分别选中时间标记，分别添加事件，对应着去给相对定位容器创建数据单元：

事件的属性设置如上图，因为输出需要以分类作为筛选条件，所以要先点击数据单元，弹出输出条件框后选择该分类数据的输出，分类=分类名称。

由于是在当前页面筛选数据需要从数据的头部重新筛选输出，所以“从头获取”、“刷新页面”需要开启。

做好之后的效果如下——

（仅用于教学，所以数据表的数据是乱填的，不要介意哈）

最后的温馨提示：

（1）时间轴/滑动时间轴的实际长度是可调整的，当实际时长＞原始时长时，播放速率变大，反之变小；

（2）容器是个好功能，能充当中转站的角色，同类型的素材、功能可以放在容器下管理；

（3）滑动时间轴需要打开剪切，当素材处在舞台外时，不打开剪切用PC预览时，会把舞台外的素材显示出来，体验不好；

（4）数据单元的属性栏上，可以修改“更新行数”的值，这个值相当于一次刷新的数据数。

（5）在数据表上传数据后，记得保存，记得保存，记得保存，重要的事说三遍。

最后的最后，我还搜罗到设计师「永恒」用相对定位容器做的一个酷炫的购物页面Demo，还兼容移动端和PC端，感兴趣的可以瞅瞅——

▲移动端扫它

PC端点这里打开：http://821b071f41bc.vt.iamh5.cn/v3/idea/DuhWO5i

是不是赶脚很牛X？

电商网站、个人作品主页、个人博客、企业微官网统统没问题，相对定位容器帮你自动排版。

你也能做！还不赶紧动手？