HarmonyOS有没有方案可以实现下拉刷新时多一个页签,先前创建的页签能复用同时其内容页内容也不变

使用Tabs组件时,初始化创建了两个页签(页签A和页签B),页签A包含广告轮播组件,页签B包含视频播放组件。下拉刷新时,会多一个页签C。现在希望刷新后,页签A和页签B不重新创建,还是沿用初始化创建的,同时里面的内容页也不刷新

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

可以使用ForEach渲染来达到效果。在ForEach组件进行非首次渲染时,它会检查新生成的键值是否在上次渲染中已经存在。如果键值不存在,则会创建一个新的组件;如果键值存在,则不会创建新的组件,而是直接渲染该键值所对应的组件。

文档可参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-rendering-control-foreach-V5#%E9%9D%9E%E9%A6%96%E6%AC%A1%E6%B8%B2%E6%9F%93

示例代码如下:

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 TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private TabsController: TabsController = new TabsController()
  // 视频
  private VideoController: VideoController = new VideoController()
  @State isRefreshing: boolean = false
  @Builder TabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
  }
  @State simpleList: Array<string> = ['页面A', '页面B'];
  @State colorList: Array<string> = ['#ffd23737', '#ff6ee566', '#ff393fb5','#ffb5a039'];

  // 轮播组件
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])

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

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing}) {
        Tabs({ barPosition: BarPosition.Start, controller: this.TabsController }) {
          ForEach(this.simpleList, (item: string,index:number) => {
            TabContent() {
              Column(){
                if(index===0){
                  Swiper(this.swiperController) {
                    LazyForEach(this.data, (item: string) => {
                      Text(item.toString())
                        .width('90%')
                        .height(160)
                        .backgroundColor(0xAFEEEE)
                        .textAlign(TextAlign.Center)
                        .fontSize(30)
                    }, (item: string) => item)
                  }
                  .cachedCount(2)
                  .autoPlay(true)
                  .interval(4000)
                  .loop(true)
                  .duration(1000)
                  .itemSpace(0)
                  .indicator( // 设置圆点导航点样式
                    new DotIndicator()
                      .itemWidth(15)
                      .itemHeight(15)
                      .selectedItemWidth(15)
                      .selectedItemHeight(15)
                      .color(Color.Gray)
                      .selectedColor(Color.Blue))
                }else if(index===1){
                  Video({
                    src: 'xxx',
                    controller: this.VideoController
                  })
                    .width('100%')
                    .height(300)
                    .autoPlay(true)
                    .controls(true)
                }else{
                  Text(item)
                }
              }
              .backgroundColor(this.colorList[index])
              .width('100%').height('100%')
            }.tabBar(this.TabBuilder(index, item))
          }, (item: string) => item)
        }

        .vertical(false)
        .barMode(BarMode.Fixed)
        .barWidth(360)
        .barHeight(56)
        .animationDuration(0)
        .onChange((index: number) => {
          this.currentIndex = index
        })
        .width(360)
        .height(296)
        .backgroundColor('#F1F3F5')
      }
      .onStateChange((refreshStatus: RefreshStatus) => {
        console.info('Refresh onStatueChange state is ' + refreshStatus)
      })
      .onRefreshing(() => {
        setTimeout(() => {
          this.isRefreshing = false
          this.simpleList.push('页面C')
        }, 2000)
        console.log('onRefreshing test')
      })
      .backgroundColor(0x89CFF0)
    }.width('100%')
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS tab组件该怎么实现
72浏览 • 1回复 待解决
DevEco Studio如何打开多行
985浏览 • 1回复 待解决
希望Tabs位置是否支持自定义
391浏览 • 1回复 待解决
HarmonyOS 发现镜到底方案实现
31浏览 • 1回复 待解决
HarmonyOS有没有打开系统设置代码
364浏览 • 1回复 待解决
HarmonyOS 冷启动启动实现
69浏览 • 1回复 待解决