HarmonyOS 鸿蒙Next 在swiper里LazyForEach切换子组件不销毁重建方法 HarmonyOS 鸿蒙Next Tabs组件内LazyForEach切换tab子组件不销毁重建实现 HarmonyOS 鸿蒙Next swiper实现的Tabs内部子页面LazyForEach切换不重建子组件方法

import display from ‘@ohos.display’;
import { CommonDataSource } from ‘./CommonDataSource’;

@Component
struct TabContentW {
  index: number = 0

  aboutToAppear(): void {
    console.log(’[TabContentW] aboutToAppear’ + this.index)
  }

  aboutToDisappear(): void {
    console.log(’[TabContentW] aboutToDisappear’ + this.index)
  }

  build() {
    Text(this.index + ‘’)
      .fontSize(16)
  }
}

@Component
struct TestBar {
  @State curIndex: number = 0
  @Prop tabDatas: string[] = []
  datas: CommonDataSource<string> = new CommonDataSource([])
  shouldChangeTab?: (form: number, to: number) => boolean
  swiperController: SwiperController = new SwiperController()

  changeTabTo(index: number) {
    this.curIndex = index
  }

  aboutToAppear(): void {
    this.datas.pushDataArray(this.tabDatas)
  }

  @State title: string = ‘’
  @State deTitlt: string = ‘’

  build() {
    Column() {
      Swiper(this.swiperController) {
        LazyForEach(this.datas, (item: string, index) => {
          TabContentW({ index: index })
        }, (item: string, index) => {
          return index + ‘’
        })
      }
      .layoutWeight(1)
      .index(this.curIndex)
      .disableSwipe(true)
      .cachedCount(0)
      .vertical(false)
      .loop(false)
      .indicator(false)
      .height(‘100%’)

      Row() {
        ForEach(this.tabDatas, (item: string, index: number) => {
          Text(item)
            .fontSize(18)
            .layoutWeight(1)
            .height(‘100%’)
            .textAlign(TextAlign.Center)
            .fontColor(this.curIndex === index ? Color.Red : Color.Black)
            .onClick(() => {

              /// todo 切换前判断是否切换tab
              let change = this.shouldChangeTab?.(this.curIndex, index)
              if (change) {
                this.changeTabTo(index)
              }
            })
        }, (item: string, index: number) => {
          return item
        })
      }.width(‘100%’)
      .justifyContent(FlexAlign.SpaceAround)
      .height(56)

    }.height(getScreenInfo().screenH - 20)
    .position({ y: -px2vp(126) })
  }
}

@Entry
@Component
export struct TabTest {
  @State tabDatas: string[] = []
  @State curIndex: number = 0
  tabController: TabsController = new TabsController()

  aboutToAppear(): void {
    this.tabDatas = [‘首页’, ‘第二页’, ‘第三页’, ‘我的’]
  }

  @Builder
  tabBar(title: string, index: number) {
    Text(title)
      .fontSize(18)
      .fontColor(index === this.curIndex ? Color.Red : Color.Black)
  }

  @Builder
  testCustonTab() {
    TestBar({
      tabDatas: this.tabDatas, shouldChangeTab: (from: number, to: number) => {
        return true
      }
    }).width(‘100%’)
      .height(‘100%’)
  }

  build() {
    Stack({ alignContent: Alignment.Center }) {
      this.testCustonTab()
    }.width(‘100%’)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

function getScreenInfo(isVp: boolean = true): ScreenSize {
  let displayInfo = display.getDefaultDisplaySync();
  let screenW = displayInfo.width / (isVp ? displayInfo.scaledDensity : 1)
  let screenH = displayInfo.height / (isVp ? displayInfo.scaledDensity : 1)
  return {
    screenW: screenW,
    screenH: screenH
  }
}

export interface ScreenSize {
  screenW: number
  screenH: number
}