openharmony容器组件之Swiper

Swiper：滑动容器，提供切换子组件显示的能力

Swiper(value:{controller?: SwiperController})
   controller：给组件绑定一个控制器，用来控制组件翻页
属性：
index:设置当前在容器中显示的子组件的索引值，默认0
autoPlay:子组件是否自动播放，自动播放状态下，导航点不可操作，默认false
interval:使用自动播放时播放的时间间隔，单位为毫秒，默认3000
indicator:是否启用导航点指示器，默认true
loop:是否开启循环，默认true
duration:子组件切换的动画时长，单位为毫秒，默认400
vertical:是否为纵向滑动，默认false
itemSpace:设置子组件与子组件之间间隙，默认0
cachedCount(API8):设置预加载子组件个数，默认1
disableSwipe(API8):禁用组件滑动切换功能。
curve(API8)：设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考Curve枚举说明，也可以通过插值计算模块提供的接口创建自定义的Curves(插值曲线对象)，默认Curve.Ease
indicatorStyle(API8)：设置indicator样式
   {
   left?: Length,//设置导航点距离Swiper组件左边的距离
   top?: Length,//设置导航点距离Swiper组件顶部的距离
   right?: Length,//设置导航点距离Swiper组件右边的距离
   bottom?: Length,//设置导航点距离Swiper组件底部的距离
   size?: Length,//设置导航点的直径
   color?: Color,//设置导航点的颜色
   selectedColor?: Color//设置选中的导航点的颜色
   }

SwiperController:Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页
showNext():void   翻至下一页。
showPrevious():void   翻至上一页。
事件:
onChange( index: number) => void   当前显示的组件索引变化时触发该事件

案例效果：

代码：

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%')
  }
}

openharmony容器组件之Swiper

猜你喜欢