openharmony container component Swiper

Swiper: Sliding container, providing the ability to switch the display of sub-components

Swiper(value:{controller?: SwiperController})
    controller: Bind a controller to the component to control page turning of the component.
Attributes:
index : Set the index value of the subcomponent currently displayed in the container, default 0
autoPlay : subcomponent Whether to auto-play. In the auto-play state, the navigation point is inoperable. The default is false.
interval : the time interval for playing when using auto-play. The unit is milliseconds. The default is 3000.
indicator : whether to enable the navigation point indicator. The default is true.
loop : whether to enable looping. Default true
duration : animation duration of sub-component switching, unit is milliseconds, default 400
vertical : whether to slide vertically, default false
itemSpace : set the gap between sub-components, default 0
cachedCount (API8): set preloading sub-components Number, default 1
disableSwipe (API8): Disable component sliding switching function.
curve (API8): Set the animation curve of Swiper. The default is the fade-in and fade-out curve. For commonly used curves, refer to the Curve enumeration description. You can also create custom Curves (interpolation curve objects) through the interface provided by the interpolation calculation module. The default is Curve.Ease indicatorStyle
.(API8): Set indicator style    
    {     left?: Length,//Set the distance between the navigation point and the left side of the Swiper component     top?: Length,//Set the distance between the navigation point and the top of the Swiper component     right?: Length,//Set the navigation point The distance from the right side of the Swiper component     bottom?: Length,//Set the distance from the navigation point to the bottom of the Swiper component     size?: Length,//Set the diameter of the navigation point     color?: Color,//Set the color of the navigation point     selectedColor?: Color //Set the color of the selected navigation point     }    

SwiperController : The controller of the Swiper container component. You can bind this object to the Swiper component, and then use it to control page turning
showNext():void to turn to the next page.
showPrevious():void Go to the previous page.
Event:
onChange( index: number) => void This event is triggered when the index of the currently displayed component changes.

Case effect:

Code:

 

class MyDataSource implements IDataSource {
  private list: number[] = []
  private listener: DataChangeListener

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number{
    return this.list.length
  }

  getData(index: number) {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener) {
    this.listener = listener
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperPageT {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])

  aboutToAppear(): void{
    let list = []
    for (var i = 1;i <= 10; i++) {
      list.push(i.toString())
    }
    this.data = new MyDataSource(list)
  }

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) => {
          Text(item).width('90%').height(160)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
        }, item => item)
      }
      .cachedCount(2) //设置预加载个数
      .index(1) //设置当前显示的组件索引
      .autoPlay(true) //自动播放
      .interval(4000) //自动播放时间间隔
      .indicator(true) //默认开启指示点
      .loop(false) //循环播放
      .duration(1000) //切换动画时长
      .vertical(false) //横向切换
      .itemSpace(0) //组件之间的间隙
      .curve(Curve.Linear) //动画曲线
      .onChange((index: number) => {
        console.info(index.toString())
      })

      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('next').onClick(() => {
          this.swiperController.showNext()
        })
        Button('preview').onClick(() => {
          this.swiperController.showPrevious()
        })
      }
    }
    .width('100%')
    .height('100%')
  }
}