创建轮播（Swiper）,Swiper组件在不同属性下的布局效果通过按钮的方式整合在一起

创建轮播（Swiper）

HarmonyOS

zbw_apple

2024-05-26 15:29:44

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

文档上轮播组件Swiper的示例比较分散，不利于开发者动态观察不同属性下的布局效果。该demo将Swiper组件在不同属性下的布局效果通过按钮的方式整合在一起。

通过点击对应按钮，可以观察到对应属性下的布局效果。方便开发者理解各个属性的功能。

使用的核心API

核心API可参考：创建轮播（Swiper）

核心代码解释

loop：通过loop属性控制是否循环播放，该属性默认值为true。当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。
autoPlay：Swiper通过设置autoPlay属性，控制是否自动轮播子组件。该属性默认值为false。autoPlay为true时，会自动切换播放子组件，子组件与子组件之间的播放间隔通过interval属性设置。interval属性默认值为3000，单位毫秒。
indicatorStyle：Swiper提供了默认的导航点样式，导航点默认显示在Swiper下方居中位置，开发者也可以通过indicatorStyle属性自定义导航点的位置和样式。通过indicatorStyle属性，开发者可以设置导航点相对于Swiper组件上下左右四个方位的位置，同时也可以设置每个导航点的尺寸、颜色、蒙层和被选中导航点的颜色。
showNext()：通过controller切换到后一页。
showPrevious()：通过controller切换到前一页。
vertical：Swiper支持水平和垂直方向上进行轮播，主要通过vertical属性控制。当vertical为true时，表示在垂直方向上进行轮播；为false时，表示在水平方向上进行轮播。vertical默认值为false。
displayCount：Swiper支持在一个页面内同时显示多个子组件，通过displayCount属性设置。

//创建轮播Swiper 
import router from '@ohos.router' 
  
@Entry 
@Component 
struct Index{ 
  build() { 
    Column({space: 50}){ 
      Text('创建轮播（Swiper）') 
        .fontSize(24) 
        .fontWeight(FontWeight.Bold) 
  
      Text('Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。' + 
        '通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。') 
  
      Button('循环播放') 
        .width('50%') 
        .onClick(() =>{ 
          console.info('循环播放') 
          router.pushUrl({ 
            url: 'pages/Loop' 
          }) 
        }) 
  
      Button('自动轮播') 
        .width('50%') 
        .onClick(() =>{ 
          console.info('自动轮播') 
          router.pushUrl({ 
            url: 'pages/AutoPlay' 
          }) 
        }) 
  
      Button('自定义导航点样式') 
        .width('50%') 
        .onClick(() =>{ 
          console.info('自定义导航点样式') 
          router.pushUrl({ 
            url: 'pages/IndicatorStyleExample' 
          }) 
        }) 
  
      Button('页面切换方式') 
        .width('50%') 
        .onClick(() =>{ 
          console.info('页面切换方式') 
          router.pushUrl({ 
            url: 'pages/SwitchMode' 
          }) 
        }) 
  
      Button('轮播方向') 
        .width('50%') 
        .onClick(() =>{ 
          console.info('轮播方向') 
          router.pushUrl({ 
            url: 'pages/CarouselDirection' 
          }) 
        }) 
  
      Button('每页显示多个子页面') 
        .width('50%') 
        .onClick(() =>{ 
          console.info('每页显示多个子页面') 
          router.pushUrl({ 
            url: 'pages/DisplayCount' 
          }) 
        }) 
    } 
    .width('100%') 
    .height('100%') 
    .margin({top: 10}) 
  } 
}

实现效果