Protopie实战教程：滑页切换效果

　　本篇文章为大家展示了在Protopie中如何实现滑页效果，来看看吧！
　　左右滑页是手机上常用的一种交互方式，在Protopie中，我们无需任何交互配置即可实现滑页效果，这完全得益于Protopie中强大的“滑页容器层”。效果如下：
　　滑页效果：
　　分别在“slidezone”滑页容器层内添加“About”“Students”“Reviews”“Posts”四个滑动内容图层，并根据设备屏幕像素n将这四个图层的X轴坐标分别设置为0，n，2n，3n。（以iPhoneX为例，屏幕像素为375x812，将四个图层的X轴坐标分别设置为0，375，750，1125）。
　　这样，我们无需任何其他设置即可实现左右滑页的效果，非常方便。
　　小提示：滑页容器层有一个特性叫“反弹”，包含“弹跳”和“无效果”两个选项。“弹跳”的效果是当用户在第一页往前滑动或者在最后一页往后滑动时，可以看到页面内容继续拉动的效果，但是手指放开后页面内容会“反弹”回去。“弹跳”和“无效果”的对比如下：
　　滑动指示块：
　　为了使用户体验更好，我们可以在滑页的同时，让Tab下面的滑动指示块跟随版块内容，同时为4个Tab添加点击切换效果。
　　首先，我们复制3个“rectangleselect”的滑动指示块图层，并将它们分别移动至“Students”“Reviews”“Posts”这3个Tab的下方，记录它们的X轴坐标分别为114，205，287，删除复制出来的3个“rectangleselect”图层；同时我们也需要记录初始位置X轴坐标为29。
　　然后，我们添加“监听”触发器，选择“slidezone”滑页容器层，选择监听滚页事件；接着，我们为“监听”触发器添加“条件”：当“slidezone”“滚页”“”“1a数值”“375”（iPhoneX的屏幕像素为375x812）时，将“rectangleselect”的坐标位“移动至”X轴坐标“114”。
　　照此方法，我们分别添加条件“slidezone”“滚页”至“750”，“1125”时，“rectangleselect”的X轴坐标移动至“205”，“287”。当然，千万别忘了添加条件当“slidezone”的位置为“0”时，将X轴坐标移动至“29”。
　　这样，我们就可以看到Tab下方的滑动指示块的位置会随着下方内容的切换而变化了。
　　Tab点击效果：
　　除了手指滑页切换Tab内容，我们也需要添加点击Tab切换相应内容的效果。
　　我们选中“AboutTab”图层，添加“单击”触发器，设置“滚页”事件为“slidezone”“滚动至”“0”；我们还需将“About”下方的滑动指示块“rectangleselect”移动至X轴坐标为“29”的位置。此时，我们可以用复制的方式，将刚才设置好的“监听”触发器中的移动事件复制到此处的“单击”触发器中。
　　依次为“StudentsTab”“ReviewsTab”“PostsTab”图层添加“单击”触发器，设置“滚页”事件为“slidezone”“滚动至”“375”，“750”，“1125”；依次从“监听”触发器中复制“移动”事件。
　　完成以后，我们就可以在预览窗中看到滑页切换和Tab点击切换同时作用的效果了。
　　源文件下载：slide。pie