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

创建轮播(Swiper)

HarmonyOS
2024-05-26 15:29:44
浏览
收藏 0
回答 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}) 
  } 
}

实现效果

分享
微博
QQ
微信
回复
2024-05-27 20:30:48
相关问题
使用swiper组件实现viewPager效果
548浏览 • 1回复 待解决
Swiper轮播图带放大缩小动效实践
581浏览 • 1回复 待解决
Swiper是否支持组件复用
393浏览 • 1回复 待解决
开源书籍推荐,大家一起来学习
4336浏览 • 1回复 待解决
如何使用Swiper组件实现下拉刷新
203浏览 • 1回复 待解决
Swiper组件如何设置导航点位置
698浏览 • 1回复 待解决
Swiper数量是否有限制
760浏览 • 1回复 待解决
Swiper 组件嵌套图片刷新数据会闪烁
359浏览 • 1回复 待解决
请问tab按钮组切换效果
436浏览 • 1回复 待解决
swiper切换监听生命周期
515浏览 • 1回复 待解决
litewearable支持swiper吗?
1341浏览 • 1回复 待解决