轮播（Swiper）
Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。
针对复杂页面场景，可以使用Swiper组件的预加载机制，利用主线程的空闲时间来提前构建和布局绘制组件，优化滑动体验。
布局与约束
Swiper作为一个容器组件，如果设置了自身尺寸属性，则在轮播显示过程中均以该尺寸生效。如果自身尺寸属性未被设置，则分两种情况：
- 设置了prevMargin或者nextMargin属性，则
Swiper自身尺寸会跟随其父组件； - 未设置prevMargin或者nextMargin属性，则会自动根据子组件的大小设置自身的尺寸。
常用属性
| 属性值 | 属性描述 | 默认值 |
|---|---|---|
| loop | 循环播放 | true |
| autoPlay | 自动轮播 | false |
| interval | 播放间隔 | 3000，单位毫秒 |
| indicator | 导航点样式 | - |
| displayArrow | 控制导航点箭头的大小、位置、颜色，底板的大小及颜色，以及鼠标悬停时是否显示箭头 | - |
| vertical | 轮播方向 | false |
| displayCount | 在一个页面内同时显示多个子组件 | - |
选项卡（Tabs）
当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。
基本布局
Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。
TabContent
每一个TabContent对应的内容需要有一个页签，可以通过TabContent的tabBar属性进行配置。在如下TabContent组件上设置tabBar属性，可以设置其对应页签中的内容，tabBar作为内容的页签。
TabContent() {Text('首页的内容').fontSize(30)}
.tabBar('首页')
barPosition
barPosition用于设置Tabs的导航栏位置。
- BarPosition.Start：导航栏位于顶部，默认值
- BarPosition.End：导航栏位于底部
常见属性
| 属性名称 | 属性说明 | 属性默认值 |
|---|---|---|
| vertical | 内容页和导航栏垂直方向排列 | false |
| scrollable | 控制滑动切换 | true |
| barMode | 控制导航栏是否可以滚动 | BarMode.Fixed |
自定义导航栏
对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。
设置自定义导航栏需要使用tabBar的参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。例如这里声明tabBuilder的自定义函数组件，传入参数包括页签文字title，对应位置index，以及选中状态和未选中状态的图片资源。通过当前活跃的currentIndex和页签对应的targetIndex匹配与否，决定UI显示的样式。
@Builder tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {Column() {Image(this.currentIndex === targetIndex ? selectedImg : normalImg).size({ width: 25, height: 25 })Text(title).fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')}.width('100%').height(50).justifyContent(FlexAlign.Center)
}
