HarmonyOS开发之Swiper的使用(跳转到指定索引的方法)
一,效果图
class MyDataSource implements IDataSource {private list: number[] = []private listener: DataChangeListenerconstructor(list: number[]) {this.list = list}totalCount(): number {return this.list.length}getData(index: number): any {return this.list[index]}registerDataChangeListener(listener: DataChangeListener): void {this.listener = listener}unregisterDataChangeListener() {}
}// 测试用例
@Entry
@Component
struct SwiperExamplePage1 {private swiperController: SwiperController = new SwiperController()private data: MyDataSource = new MyDataSource([])@State currentIndex: number = 0; // 用于存储当前的索引aboutToAppear(): void {let list = []for (var i = 1; i <= 10; i++) {list.push(i.toString());}this.data = new MyDataSource(list)}onPageShow(){this.navigateToIndex(5)}// 实现跳转到指定索引的方法navigateToIndex(index: number): void {const difference = index - this.currentIndex; // 计算差值if (difference > 0) {for (let i = 0; i < difference; i++) {this.swiperController.showNext(); // 向右滑动}} else if (difference < 0) {for (let i = 0; i < Math.abs(difference); i++) {this.swiperController.showPrevious(); // 向左滑动}}}build() {Column({ space: 5 }) {Swiper(this.swiperController) {LazyForEach(this.data, (item: string) => {Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30)}, item => item)}.cachedCount(2).index(1).autoPlay(true).interval(4000).indicator(true).loop(true).duration(1000).itemSpace(0).curve(Curve.Linear).onChange((index: number) => {this.currentIndex=indexconsole.info(index.toString())})Row({ space: 12 }) {Button('showNext').onClick(() => {})Button('showPrevious').onClick(() => {this.swiperController.showPrevious()})}.margin(5)}.width('100%').margin({ top: 5 })}
}