SwiperControllerSwiper容器组件的控制器,可以将此对象绑定至Swiper组件,如何通过它控制翻页

SwiperControllerSwiper容器组件的控制器,可以将此对象绑定至Swiper组件,可以通过它控制翻页。

直接第几页,不想一个一个的翻页,直接第十页。


HarmonyOS
2024-09-23 14:13:16
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

demo如下:

class MyDataSource implements IDataSource {  
  private list: number[] = []  
  constructor(list: number[]) {  
    this.list = list}  
  totalCount(): number {  
    return this.list.length}  
  getData(index: number): number {  
    return this.list[index]}  
  registerDataChangeListener(listener: DataChangeListener): void {}  
  unregisterDataChangeListener() {}}  
@Entry  
@Component  
struct SwiperExample {  
  private swiperController: SwiperController = new SwiperController()  
  private data: MyDataSource = new MyDataSource([])  
  @State currentIndex: number = 1  
  @State showSheet: boolean = false  
  @State sheetHeight: number = 300;  
  @State showDragBar: boolean = true;  
  aboutToAppear(): void {  
    let list: number[] = []  
    for (let i = 1; i <= 1000; i++) {  
      list.push(i);}  
    this.data = new MyDataSource(list)}  
  @Builder  
  pager() {  
    Grid() {  
      LazyForEach(this.data, (item: number) => {  
        GridItem() {  
          Text(item.toString())  
            .width(30)  
            .height(30)  
            .border({ width: 1, color: (this.currentIndex + 1) === item ? Color.Red : Color.Gray, radius: 15 })  
            .textAlign(TextAlign.Center)  
            .onClick(() => {  
              this.currentIndex = item - 1  
            })  
        }  
      }, (item: string) => item)  
    }.columnsTemplate("1fr 1fr 1fr 1fr").rowsGap(8)  
    .width("100%")  
    .height("100%")  
  }  
  build() {  
    Column() {  
      Swiper(this.swiperController) {  
        LazyForEach(this.data, (item: string) => {  
          Text(item.toString())  
            .width('100%')  
            .height("100%")  
            .backgroundColor(0xAFEEEE)  
            .textAlign(TextAlign.Center)  
            .fontSize(30)  
        }, (item: string) => item)  
      }  
      .layoutWeight(1)  
      .cachedCount(2)  
      .index($$this.currentIndex)  
      .indicator(false)  
      .loop(true)  
      .duration(300)  
      .curve(Curve.Linear)  
      Row({ space: 12 }) {  
        Text(`当前在第${this.currentIndex + 1}页,总计${this.data.totalCount()}`)  
      }.margin(5)  
      .onClick((  
        this.showSheet = true  
    })  
    .bindSheet($$this.showSheet, this.pager(), {  
      height: this.sheetHeight,  
      dragBar: this.showDragBar,  
      onAppear: () => {  
        console.log("BindSheet onAppear.")  
      },  
      onDisappear: () => {  
        console.log("BindSheet onDisappear.")  
      }  
    })  
  }.width('100%')  
  .margin({ top: 5 })  
}  
}
分享
微博
QQ
微信
回复
2024-09-23 17:34:16
相关问题
什么是控制器controller
738浏览 • 1回复 待解决
HarmonyOS video空间自定义控制器
211浏览 • 1回复 待解决
如何控制canvas组件刷新呢
345浏览 • 1回复 待解决
HarmonyOS 如何从子组件控制手势分发
365浏览 • 1回复 待解决
HarmonyOS如何控制组件属性输出
304浏览 • 1回复 待解决
如何自定义Video组件控制栏样式
2270浏览 • 1回复 待解决
通过getPage()接口翻页
288浏览 • 1回复 待解决
Harmony弹窗可以精确控制位置吗?
1747浏览 • 1回复 待解决
用数组变量控制组件属性不生效
1688浏览 • 1回复 待解决