现在进入iH5初级教程第二课:排版基础,全面了解H5面板工具的使用方法。
1、 在对象树中选择舞台,通过工具栏的图片功能上传背景图及三个方向的箭头。
2、 在对象树中选择舞台,用工具栏的面板工具在舞台上绘制一个框。
3、 选中面板后,通过工具栏图片功能插入超出面板长度的菜单栏图像
4、 当面板属性中的剪切选项设为否时,图片超出部分可见;设为是时,超出部分将被隐藏。预览中可查看剪切效果,通过左右拖动可调整菜单图片位置。
5、 创建五个页面,每页插入一个面板,面板内放置一张长图,设置面板剪切属性为否,使图片超出面板部分仍可见。
6、 开启剪切属性后,面板外的图像部分将被隐藏,预览时可见剪切效果,通过上下拖动可调整图片位置。
7、 选择菜单图片,点击工具栏的透明按钮,在指定目录位置绘制一个框。
8、 选中透明按钮,通过工具栏事件功能添加点击事件,实现跳转至目标页面。
9、 事件前置知识
10、 关键组件:界面、视图、透明按键、交互响应
11、 滑动菜单实现方法示例
12、 知识点:核心概念
13、 以该案例目录为例,图片长度大于面板时可实现左右滑动;若图片高度超过面板高度,预览时无法稳定横向移动。因此,为确保滑动效果顺畅,图片高度应控制在面板高度以内,避免出现显示异常或操作不畅的问题。
14、 剪切属性用于控制面板外图像的显示。设为是时,编辑与预览均只显示面板内部分;设为否时,编辑状态下可见面板外图像,便于调整,预览时仍按是的效果呈现。
15、 事件关联
16、 页面跳转中
17、 透明按钮被触发时
18、 点击触发
19、 舞台作为核心呈现空间
20、 跳转至目标页面
21、 挑选一个页面
