HarmonyOS 鸿蒙Next：Tabs+TabContent切换页面时可通过onVisibleAreaChange感知显示与隐藏

@Entry
@Component
struct Page32 {
@State fontColor: string = ‘#182431’
@State selectedFontColor: string = ‘#007DFF’
@State currentIndex: number = 0
private controller: TabsController = new TabsController()

@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%’)
}
build() {
Column() {
Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
TabContent() {
Column().width(‘100%’).height(‘100%’).backgroundColor(’#00CB87’)
.onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
console.info('Test Text isVisible: ’ + isVisible + ‘, currentRatio:’ + currentRatio)
if (isVisible && currentRatio >= 1.0) {
console.info(‘首页显示了’)
}
          <span class="hljs-keyword">if</span> (!isVisible &amp;&amp; currentRatio &lt;= <span class="hljs-number">0.0</span>) {
            console.info(<span class="hljs-string">'首页隐藏了'</span>)
          }
        })
    }.tabBar(<span class="hljs-keyword">this</span>.tabBuilder(<span class="hljs-number">0</span>, <span class="hljs-string">'首页'</span>))


    TabContent() {
      Column().width(<span class="hljs-string">'100%'</span>).height(<span class="hljs-string">'100%'</span>).backgroundColor(<span class="hljs-string">'#007DFF'</span>)
        .onVisibleAreaChange([<span class="hljs-number">0.0</span>, <span class="hljs-number">1.0</span>], (isVisible: boolean, currentRatio: number) =&gt; {
          console.info(<span class="hljs-string">'Test Text isVisible: '</span> + isVisible + <span class="hljs-string">', currentRatio:'</span> + currentRatio)
          <span class="hljs-keyword">if</span> (isVisible &amp;&amp; currentRatio &gt;= <span class="hljs-number">1.0</span>) {
            console.info(<span class="hljs-string">'新闻页显示了'</span>)
          }

          <span class="hljs-keyword">if</span> (!isVisible &amp;&amp; currentRatio &lt;= <span class="hljs-number">0.0</span>) {
            console.info(<span class="hljs-string">'新闻页隐藏了'</span>)
          }
        })
    }.tabBar(<span class="hljs-keyword">this</span>.tabBuilder(<span class="hljs-number">1</span>, <span class="hljs-string">'新闻'</span>))

    TabContent() {
      Column().width(<span class="hljs-string">'100%'</span>).height(<span class="hljs-string">'100%'</span>).backgroundColor(<span class="hljs-string">'#FFBF00'</span>)
        .onVisibleAreaChange([<span class="hljs-number">0.0</span>, <span class="hljs-number">1.0</span>], (isVisible: boolean, currentRatio: number) =&gt; {
          console.info(<span class="hljs-string">'Test Text isVisible: '</span> + isVisible + <span class="hljs-string">', currentRatio:'</span> + currentRatio)
          <span class="hljs-keyword">if</span> (isVisible &amp;&amp; currentRatio &gt;= <span class="hljs-number">1.0</span>) {
            console.info(<span class="hljs-string">'我的页显示了'</span>)
          }

          <span class="hljs-keyword">if</span> (!isVisible &amp;&amp; currentRatio &lt;= <span class="hljs-number">0.0</span>) {
            console.info(<span class="hljs-string">'我的页隐藏了'</span>)
          }
        })
    }.tabBar(<span class="hljs-keyword">this</span>.tabBuilder(<span class="hljs-number">2</span>, <span class="hljs-string">'我的'</span>))

  }
  .vertical(<span class="hljs-literal">false</span>)
  .barMode(BarMode.Fixed)
  .barWidth(<span class="hljs-number">360</span>)
  .barHeight(<span class="hljs-number">56</span>)
  .animationDuration(<span class="hljs-number">400</span>)
  .onChange((index: number) =&gt; {
    <span class="hljs-keyword">this</span>.currentIndex = index
  })
  .width(<span class="hljs-number">360</span>)
  .height(<span class="hljs-number">296</span>)
  .margin({ top: <span class="hljs-number">52</span> })
  .backgroundColor(<span class="hljs-string">'#F1F3F5'</span>)
}.width(<span class="hljs-string">'100%'</span>)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>