鸿蒙PageSlider，PageSliderIndicator组件指南，顺滑切换无忧！

2023-11-30 04:35:56

PageSlider组件介绍

PageSlider是一个用于页面之间切换的组件，它通过响应滑动事件完成页面间的切换，支持横向和纵向两种滑动方式，能够满足不同的应用场景需求。

基本属性

属性	类型	默认值	说明
pages	List	[]	要切换的页面列表
defaultPage	int	0	默认显示的页面索引
orientation	int	PAGE_SLIDER_HORIZONTAL	滑动方向，取值：PAGE_SLIDER_HORIZONTAL（横向）或PAGE_SLIDER_VERTICAL（纵向）
enablePageSlide	boolean	true	是否允许页面滑动
enablePageFling	boolean	true	是否允许页面抛掷
interval	int	0	自动切换页面间隔，单位：毫秒，0表示不自动切换
loop	boolean	false	是否循环切换页面
enableIndicator	boolean	true	是否显示页面指示器

事件处理

事件	参数	说明
onPageChange	int page, int oldPage	页面切换时触发，page为当前页面索引，oldPage为之前页面索引
onPageScrolled	float offset, int page	页面滚动时触发，offset为页面滚动距离，page为当前页面索引
onPageFling	float velocityX, float velocityY	页面抛掷时触发，velocityX和velocityY分别为水平和垂直方向的抛掷速度

使用示例

<com.huawei.鸿蒙.components.PageSlider>
  <com.huawei.鸿蒙.components.Page>
    <!-- 第一页内容 -->
  </com.huawei.鸿蒙.components.Page>
  <com.huawei.鸿蒙.components.Page>
    <!-- 第二页内容 -->
  </com.huawei.鸿蒙.components.Page>
  <com.huawei.鸿蒙.components.Page>
    <!-- 第三页内容 -->
  </com.huawei.鸿蒙.components.Page>
</com.huawei.鸿蒙.components.PageSlider>

PageSliderIndicator组件介绍

PageSliderIndicator是一个用于显示页面切换指示器的组件，它与PageSlider组件配合使用，可以帮助用户直观地了解当前页面索引和页面数量。

基本属性

属性	类型	默认值	说明
pages	int	0	页面数量
defaultPage	int	0	默认显示的页面索引
orientation	int	PAGE_SLIDER_INDICATOR_HORIZONTAL	指示器方向，取值：PAGE_SLIDER_INDICATOR_HORIZONTAL（横向）或PAGE_SLIDER_INDICATOR_VERTICAL（纵向）
indicatorSize	int	10	指示器大小，单位：像素
indicatorSpacing	int	10	指示器间距，单位：像素
indicatorColor	Color	Color.WHITE	指示器颜色
selectedIndicatorColor	Color	Color.BLUE	选中的指示器颜色

事件处理

无

使用示例

<com.huawei.鸿蒙.components.PageSliderIndicator>
  <com.huawei.鸿蒙.components.PageSlider>
    <com.huawei.鸿蒙.components.Page>
      <!-- 第一页内容 -->
    </com.huawei.鸿蒙.components.Page>
    <com.huawei.鸿蒙.components.Page>
      <!-- 第二页内容 -->
    </com.huawei.鸿蒙.components.Page>
    <com.huawei.鸿蒙.components.Page>
      <!-- 第三页内容 -->
    </com.huawei.鸿蒙.components.Page>
  </com.huawei.鸿蒙.components.PageSlider>
</com.huawei.鸿蒙.components.PageSliderIndicator>