swiper切换监听生命周期

​点击导航栏上面的切换按钮,希望能切换子组件,但要求:

1.被切走的子界面,在被切走后能销毁,同时调用aboutToDisappear声明周期函数,让我可以完成关闭定时器等操作。

2.新显示子界面调用aboutToAppear,这样我可以重新对这个子组件进行初始化。

HarmonyOS
2024-05-26 14:39:54
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
youganlan

核心代码如下:

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): any { 
    return this.list[index] 
  } 
  
  registerDataChangeListener(listener: DataChangeListener): void { 
    this.listener = listener 
  } 
  
  unregisterDataChangeListener() { 
  } 
} 
  
  
@Entry 
@Component 
struct SwiperExample { 
  private swiperController: SwiperController = new SwiperController() 
  private data: MyDataSource = new MyDataSource([]) 
  @State index: number = 0; 
  
  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) => { 
          ChildCmp({item: item} 
        }, item => item) 
      } 
      .cachedCount(1) 
      .height(100) 
      // @ts-ignore 
      .index($$this.index) 
      Row({ space: 12 }) { 
        Button('上一个') 
          .onClick(() => { 
            this.swiperController.showPrevious() 
          }) 
        Button('指定index') 
          .onClick(()=>{ 
              this.index = 0 
          }) 
  
        Button('下一个') 
          .onClick(() => { 
            this.swiperController.showNext() 
          }) 
      }.margin(5) 
      .height(100) 
  
    }.width('100%') 
    .margin({ top: 5 }) 
  } 
} 
  
@Component 
struct ChildCmp { 
  @Prop item: string 
 
  build() { 
    Column() { 
      Text(this.item) 
    } 
    .width('100%') 
    .height('100%') 
    .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => { 
      if (isVisible && currentRatio >= 1.0) { 
        console.info('我出来了'+this.item) 
      } 
      if (!isVisible && currentRatio <= 0.0) { 
        console.info('我没了'+this.item) 
      } 
    }) 
  } 
}

实现效果

分享
微博
QQ
微信
回复
2024-05-27 19:51:52
相关问题
监听Ability生命周期
534浏览 • 1回复 待解决
如何监听AbilitySlice的生命周期
4005浏览 • 1回复 待解决
弹窗组件无法调用生命周期接口
764浏览 • 1回复 待解决
如何使用AbilityStage的生命周期函数
843浏览 • 1回复 待解决
JMS 消息怎么设置生命周期呢?
1526浏览 • 1回复 待解决
如何理解和重写onBackPress生命周期
866浏览 • 1回复 待解决
Ability的生命周期回调函数有哪些呢?
4258浏览 • 1回复 待解决
公共事件的生命周期是怎样的
571浏览 • 1回复 待解决