
HarmonyOS Developer 常见组件开发指导
tabs开发指导
tabs是一种常见的界面导航结构。通过页签容器,用户可以快捷地访问应用的不同模块。具体用法请参考tabs API。
创建tabs
在pages/index目录下的hml文件中创建一个tabs组件。
设置tabs方向
tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。
设置mode属性使tab-bar的子组件均分,设置scrollable属性使tab-content不可进行左右滑动切换内容。
设置样式
设置tabs背景色及边框和tab-content布局。
显示页签索引
开发者可以为tabs添加change事件,实现页签切换后显示当前页签索引的功能。
说明
tabs子组件仅支持一个<tab-bar>和一个<tab-content>。
场景示例
在本场景中,开发者可以点击标签切换内容,选中后标签文字颜色变红,并显示下划线。
用tabs、tab-bar和tab-content实现点击切换功能,再定义数组,设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。
swiper开发指导
swiper为滑动容器,提供切换显示子组件的能力。具体用法请参考swiper。
创建swiper组件
在pages/index目录下的hml文件中创建一个swiper组件。
说明
swiper组件支持除<list>之外的子组件。
添加属性
swiper组件当不开启循环播放(loop="false")时添加自动播放属性(autoplay),设置自动播放时播放时间间隔(interval),页面会自动切换并停留在最后一个子组件页面。添加digital属性启用数字导航点,设置切换时为渐隐滑动效果(scrolleffect="fade"))。
说明
- 设置indicator(是否启用导航点指示器)属性为true时digital(是否启用数字导航点)属性才会生效。
- swiper子组件的个数大于等于2时设置的loop属性才会生效。
- scrolleffect属性仅在loop属性值为false时生效。
设置样式
设置swiper组件的宽高,导航点指示器的直径大小(indicator-size)、颜色(indicator-color)、相对位置(ndicator-top)及选中时的颜色(indicator-selected-color)。
绑定事件
创建两个text组件添加点击事件,当点击后就调用showPrevious(显示上一个子组件)或showNext(显示下一个子组件)方法。添加select组件下拉选择时触发change事件后调用swiperTo方法跳转到指定轮播页面。swiper组件绑定change(当前显示的组件索引变化时触发)和finish(切换动画结束时触发)事件。
场景示例
本场景中使用swiper创建一个轮播图,在轮播图底部制作一个缩略图,点击缩略图后调用swipeTo方法切换到对应的轮播图。
