codecamp

创建轮播(Swiper)

Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示。通常,在一些应用首页显示推荐的内容时,需要用到轮播显示的能力。

布局与约束

Swiper作为一个容器组件,在自身尺寸属性未被设置时,会自动根据子组件的大小设置自身的尺寸。如果开发者对Swiper组件设置了固定的尺寸,则在轮播显示过程中均以该尺寸生效;否则,在轮播过程中,会根据子组件的大小自动调整自身的尺寸。

循环播放

通过loop属性控制是否循环播放,该属性默认值为true。

当loop为true时,在显示第一页或最后一页时,可以继续往前切换到前一页或者往后切换到后一页。如果loop为false,则在第一页或最后一页时,无法继续向前或者向后切换页面。

loop为true:
  1. ...
  2. private swiperController: SwiperController = new SwiperController()
  3. ...
  4. Swiper(this.swiperController) {
  5. Text("0")
  6. .width('90%')
  7. .height('100%')
  8. .backgroundColor(Color.Gray)
  9. .textAlign(TextAlign.Center)
  10. .fontSize(30)
  11. Text("1")
  12. .width('90%')
  13. .height('100%')
  14. .backgroundColor(Color.Green)
  15. .textAlign(TextAlign.Center)
  16. .fontSize(30)
  17. Text("2")
  18. .width('90%')
  19. .height('100%')
  20. .backgroundColor(Color.Blue)
  21. .textAlign(TextAlign.Center)
  22. .fontSize(30)
  23. }
  24. .loop(true)

loop为false:
  1. Swiper(this.swiperController) {
  2. Text("0")
  3. .width('90%')
  4. .height('100%')
  5. .backgroundColor(Color.Gray)
  6. .textAlign(TextAlign.Center)
  7. .fontSize(30)
  8. Text("1")
  9. .width('90%')
  10. .height('100%')
  11. .backgroundColor(Color.Green)
  12. .textAlign(TextAlign.Center)
  13. .fontSize(30)
  14. Text("2")
  15. .width('90%')
  16. .height('100%')
  17. .backgroundColor(Color.Blue)
  18. .textAlign(TextAlign.Center)
  19. .fontSize(30)
  20. }
  21. .loop(false)

自动轮播

Swiper通过设置autoPlay属性,控制是否自动轮播子组件。该属性默认值为false。

autoPlay为true时,会自动切换播放子组件,子组件与子组件之间的播放间隔通过interval属性设置。interval属性默认值为3000,单位毫秒。

autoPlay为true:
  1. Swiper(this.swiperController) {
  2. Text("0")
  3. .width('90%')
  4. .height('100%')
  5. .backgroundColor(Color.Gray)
  6. .textAlign(TextAlign.Center)
  7. .fontSize(30)
  8. Text("1")
  9. .width('90%')
  10. .height('100%')
  11. .backgroundColor(Color.Green)
  12. .textAlign(TextAlign.Center)
  13. .fontSize(30)
  14. Text("2")
  15. .width('90%')
  16. .height('100%')
  17. .backgroundColor(Color.Pink)
  18. .textAlign(TextAlign.Center)
  19. .fontSize(30)
  20. }
  21. .loop(true)
  22. .autoPlay(true)
  23. .interval(1000)

导航点样式

Swiper提供了默认的导航点样式,导航点默认显示在Swiper下方居中位置,开发者也可以通过indicatorStyle属性自定义导航点的位置和样式。

通过indicatorStyle属性,开发者可以设置导航点相对于Swiper组件上下左右四个方位的位置,同时也可以设置每个导航点的尺寸、颜色、蒙层和被选中导航点的颜色。

导航点使用默认样式:
  1. Swiper(this.swiperController) {
  2. Text("0")
  3. .width('90%')
  4. .height('100%')
  5. .backgroundColor(Color.Gray)
  6. .textAlign(TextAlign.Center)
  7. .fontSize(30)
  8. Text("1")
  9. .width('90%')
  10. .height('100%')
  11. .backgroundColor(Color.Green)
  12. .textAlign(TextAlign.Center)
  13. .fontSize(30)
  14. Text("2")
  15. .width('90%')
  16. .height('100%')
  17. .backgroundColor(Color.Pink)
  18. .textAlign(TextAlign.Center)
  19. .fontSize(30)
  20. }

自定义导航点样式(示例:导航点直径设为30VP,左边距为0,导航点颜色设为红色):
  1. Swiper(this.swiperController) {
  2. Text("0")
  3. .width('90%')
  4. .height('100%')
  5. .backgroundColor(Color.Gray)
  6. .textAlign(TextAlign.Center)
  7. .fontSize(30)
  8. Text("1")
  9. .width('90%')
  10. .height('100%')
  11. .backgroundColor(Color.Green)
  12. .textAlign(TextAlign.Center)
  13. .fontSize(30)
  14. Text("2")
  15. .width('90%')
  16. .height('100%')
  17. .backgroundColor(Color.Pink)
  18. .textAlign(TextAlign.Center)
  19. .fontSize(30)
  20. }
  21. .indicatorStyle({
  22. size: 30,
  23. left: 0,
  24. color: Color.Red
  25. })

页面切换方式

Swiper支持三种页面切换方式:手指滑动、点击导航点和通过控制器。

通过控制器切换页面:
  1. @Entry
  2. @Component
  3. struct SwiperDemo {
  4. private swiperController: SwiperController = new SwiperController();
  5. build() {
  6. Column({ space: 5 }) {
  7. Swiper(this.swiperController) {
  8. Text("0")
  9. .width(250)
  10. .height(250)
  11. .backgroundColor(Color.Gray)
  12. .textAlign(TextAlign.Center)
  13. .fontSize(30)
  14. Text("1")
  15. .width(250)
  16. .height(250)
  17. .backgroundColor(Color.Green)
  18. .textAlign(TextAlign.Center)
  19. .fontSize(30)
  20. Text("2")
  21. .width(250)
  22. .height(250)
  23. .backgroundColor(Color.Pink)
  24. .textAlign(TextAlign.Center)
  25. .fontSize(30)
  26. }
  27. .indicator(true)
  28. Row({ space: 12 }) {
  29. Button('showNext')
  30. .onClick(() => {
  31. this.swiperController.showNext(); // 通过controller切换到后一页
  32. })
  33. Button('showPrevious')
  34. .onClick(() => {
  35. this.swiperController.showPrevious(); // 通过controller切换到前一页
  36. })
  37. }.margin(5)
  38. }.width('100%')
  39. .margin({ top: 5 })
  40. }
  41. }

轮播方向

Swiper支持水平和垂直方向上进行轮播,主要通过vertical属性控制。

当vertical为true时,表示在垂直方向上进行轮播;为false时,表示在水平方向上进行轮播。vertical默认值为false。

设置水平方向上轮播:
  1. Swiper(this.swiperController) {
  2. ...
  3. }
  4. .indicator(true)
  5. .vertical(false)

设置垂直方向轮播:
  1. Swiper(this.swiperController) {
  2. ...
  3. }
  4. .indicator(true)
  5. .vertical(true)

每页显示多个子页面

Swiper支持在一个页面内同时显示多个子组件,通过displayCount属性设置。

设置一个页面内显示两个子组件:
  1. Swiper(this.swiperController) {
  2. Text("0")
  3. .width(250)
  4. .height(250)
  5. .backgroundColor(Color.Gray)
  6. .textAlign(TextAlign.Center)
  7. .fontSize(30)
  8. Text("1")
  9. .width(250)
  10. .height(250)
  11. .backgroundColor(Color.Green)
  12. .textAlign(TextAlign.Center)
  13. .fontSize(30)
  14. Text("2")
  15. .width(250)
  16. .height(250)
  17. .backgroundColor(Color.Pink)
  18. .textAlign(TextAlign.Center)
  19. .fontSize(30)
  20. Text("3")
  21. .width(250)
  22. .height(250)
  23. .backgroundColor(Color.Blue)
  24. .textAlign(TextAlign.Center)
  25. .fontSize(30)
  26. }
  27. .indicator(true)
  28. .displayCount(2)

创建网格(Grid/GridItem)
改善布局性能
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录
HAR

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }