.

8.滑动翻页:页面切换效果/翻页箭头/首尾连续翻页/翻页方向

老赵发表于:2021年07月22日 10:12:18更新于:2022年05月13日 14:07:13

一、应用场景

【跳转页面】意为在当前页的H5中,通过不同的触发去跳转到不同的页面。【跳转页面】是H5制作中最常用的触发行为。根据不同的使用场景,大致可以分为【触发器跳转页面】和【手势滑动翻页】两种。

我们将在下文中为您介绍【手势滑动翻页】。【触发器跳转页面】的介绍请点此处查看。

 

二、通过手势翻页跳转页面

在一些展示类的H5中,我们可以通过手势的滑动来跳转页面。在左侧页面设置面板中,找到翻页图标,更改翻页方式。

  • 上下翻页:指通过手势的上下滑动来翻页;

  • 左右翻页:指通过手势的左右滑动来翻页;

  • 自由翻页:指通过手势的上下左右滑动来翻页。

image.png

注意:通过手势滑动翻页的页面,必须处于同一页面组内,处于不同页面组的页面不可以通过这种方式去翻页,必须使用触发器-【跳转页面】来翻页。

 

限制滑动翻页:通过手势滑动翻页的页面,可以勾选禁止滑动翻页,这样便无法在当前页通过手势滑动的方式翻到其他页面。

image.png

 

页面切换方式:在右侧属性面板的切换效果中更改,注意部分切换效果【3D翻转】、【折页】、【书本翻页】等效果,可能会与页面中的动画动效效果冲突导致无法使用,届时使用时请注意。

image.png

 

首尾连续翻页与显示翻页箭头:勾选首尾连续翻页后,可以在翻到最后一页的时候重新翻页到首页。勾选了显示翻页箭头后,会在页面的底部或右侧显示翻页指示箭头。

image.png

 

 

五、相关Q/A

 

1. 如何限制页面滑动切换?

方法1:给页面添加页面组,不同组之间必须通过触发器进行切换;方法2:给页面右侧属性面板勾选禁止滑动翻页。

对于某些不希望通过翻页到达的页面(比如在游戏中用到了手势而不想因此造成翻页的时候),页面组的存在就极为必要。

 

2. 如何使H5循环翻页?

右侧属性面板作品信息处勾选首尾连续翻页。

 

3. 翻页提示箭头如何制作?

右侧属性面板作品信息处勾选显示翻页箭头。

 

4. 如何设置所有H5页面共用一个翻页箭头?

可以使用系统自带的翻页箭头,也可以使用自己制作的翻页箭头标识。


5.为什么我勾选了显示翻页箭头但在页面中没有看到?

翻页箭头默认在masterpage页,去masterpage页查看。


6. 页面翻页效果/页面切换效果在哪里设置?

右侧属性面板的作品信息栏中,找到页面切换效果。


--------- 不了解设计的程序员不是好客服 ---------------