HarmonyOS 鸿蒙Next tabs滑动出现延迟显示

HarmonyOS 鸿蒙Next tabs滑动出现延迟显示

@Entry
@Component
struct Index {
@State message: string = 'Hello World';
@State mis: string[] = ["1", "2", "3", "4", "5"];
@State currentIndex: number = 0
private controller: TabsController = new TabsController();
@State misTabsIndex: number = 0;
@State fontColor: string = '#182431'
@State selectedFontColor: string = '#007DFF'

@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() {
RelativeContainer() {
Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
ForEach(this.mis, (str: string, inx) => {
TabContent() {
if (this.currentIndex == inx) {
Column(){
Text(str)
}
.width("100%")
.height("100%")
.backgroundColor(Color.White)
}
}
.tabBar(this.tabBuilder(inx, 'green'))
.onWillShow(() => {
console.info("1234")
})
}, (str: string) => JSON.stringify(str))
}
.onChange((index)=>{
this.currentIndex = index
})
}
.height('100%')
.width('100%')
.backgroundColor("#f4f4f4")
}
}

TabContent进行循环显示，滑动导致出现短暂的空白，头部和TabContent中的内容延迟显示，请问怎么解决


更多关于HarmonyOS 鸿蒙Next tabs滑动出现延迟显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

.tabBar不用tabBuilder，直接使用new SubTabBarStyle('green')。

```

// xxx.ets
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TabsExample {
  [@State](/user/State) fontColor: string = '#182431'
  [@State](/user/State) selectedFontColor: string = '#007DFF'
  [@State](/user/State) currentIndex: number = 0
  private controller: TabsController = new TabsController()

build() {
Column() {
Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
TabContent() {
Column().width(‘100%’).height(‘100%’).backgroundColor(’#00CB87’)
}
.tabBar(new SubTabBarStyle(‘green’))


    TabContent() {
      Column().width(<span class="hljs-string">'100%'</span>).height(<span class="hljs-string">'100%'</span>).backgroundColor(<span class="hljs-string">'#007DFF'</span>)
    }
    .tabBar(<span class="hljs-keyword">new</span> SubTabBarStyle(<span class="hljs-string">'blue'</span>))
    
    TabContent() {
      Column().width(<span class="hljs-string">'100%'</span>).height(<span class="hljs-string">'100%'</span>).backgroundColor(<span class="hljs-string">'#FFBF00'</span>)
    }
    .tabBar(<span class="hljs-keyword">new</span> SubTabBarStyle(<span class="hljs-string">'yellow'</span>))

    TabContent() {
      Column().width(<span class="hljs-string">'100%'</span>).height(<span class="hljs-string">'100%'</span>).backgroundColor(<span class="hljs-string">'#E67C92'</span>)
    }
    .tabBar(<span class="hljs-keyword">new</span> SubTabBarStyle(<span class="hljs-string">'pink'</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>

</p> <p>新增的onAnimationStart、onAnimationEnd和onGestureSwipe事件，本地测试不会感知到明显的延迟，</p> <p>demo如下：</p> <p>

import ComponentUtils from ‘@ohos.arkui.UIContext’;


@Entry
@Component
export default struct Index {
message: string = ‘通讯录’
@State selectedFontColor: string = ‘#007DFF’
@State fontColor: string = ‘#182431’
@State currentPosition: number = 0
// @Prop @Watch (‘onRefresh’) currentIndex: number


private tabsController: TabsController = new TabsController()
@State animationDuration: number = 300
@State indicatorLeftMargin: number = 0
@State indicatorWidth: number = 0
@State currentIndex: number = 0
private tabsWidth: number = 0
private componentUtils: ComponentUtils.ComponentUtils = this.getUIContext().getComponentUtils()


@Builder
TabBuilder(index: number, name: ESObject) {


Column() {
  Row() {
    Text(name)
      .fontColor(<span class="hljs-keyword">this</span>.currentPosition === index ? <span class="hljs-keyword">this</span>.selectedFontColor : <span class="hljs-keyword">this</span>.fontColor)
      .fontSize(<span class="hljs-number">16</span>)
      .fontWeight(<span class="hljs-keyword">this</span>.currentPosition === index ? <span class="hljs-number">600</span> : <span class="hljs-number">400</span>)
      .lineHeight(<span class="hljs-number">22</span>)
      .margin({ top: <span class="hljs-number">5</span>, bottom: <span class="hljs-number">5</span>, left: <span class="hljs-number">2</span> })
  }.width(<span class="hljs-string">'95%'</span>).backgroundColor(<span class="hljs-keyword">this</span>.currentPosition === index ? <span class="hljs-string">'#ffffff'</span> : <span class="hljs-literal">null</span>).borderRadius(<span class="hljs-number">15</span>)
}.height(<span class="hljs-string">'50%'</span>)

}


build() {
Column() {
Column() {
Tabs({ barPosition: BarPosition.Start, index: this.currentPosition, controller: this.tabsController }) {
TabContent() {
Text(‘1111’).fontSize(14)
}.tabBar(this.TabBuilder(0, ‘最近联系人’))


      TabContent() {
        Text(<span class="hljs-string">'2222'</span>).fontSize(<span class="hljs-number">14</span>)
      }.tabBar(<span class="hljs-keyword">this</span>.TabBuilder(<span class="hljs-number">1</span>, <span class="hljs-string">'关注联系人'</span>))

      TabContent() {
        Text(<span class="hljs-string">'3333'</span>).fontSize(<span class="hljs-number">14</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)
    <span class="hljs-comment">// .barWidth(360)</span>
    .barHeight(<span class="hljs-number">65</span>)
    .padding({ bottom: <span class="hljs-number">15</span> })
    .onChange((index: number) =&gt; {
      <span class="hljs-keyword">this</span>.currentPosition = index
    })
    .width(<span class="hljs-string">'100%'</span>)
    .animationDuration(<span class="hljs-keyword">this</span>.animationDuration)
    .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) =&gt; {
      <span class="hljs-comment">// 切换动画开始时触发该回调。下划线跟着页面一起滑动，同时宽度渐变。</span>
      <span class="hljs-keyword">this</span>.currentPosition = targetIndex
      <span class="hljs-keyword">let</span> targetIndexInfo = <span class="hljs-keyword">this</span>.getTextInfo(targetIndex)
      <span class="hljs-keyword">this</span>.startAnimateTo(<span class="hljs-keyword">this</span>.animationDuration, targetIndexInfo.left, targetIndexInfo.width)
    })
    .onAnimationEnd((index: number, event: TabsAnimationEvent) =&gt; {
      <span class="hljs-comment">// 切换动画结束时触发该回调。下划线动画停止。</span>
      <span class="hljs-keyword">let</span> currentIndicatorInfo = <span class="hljs-keyword">this</span>.getCurrentIndicatorInfo(index, event)
      <span class="hljs-keyword">this</span>.startAnimateTo(<span class="hljs-number">0</span>, currentIndicatorInfo.left, currentIndicatorInfo.width)
    })
    .onGestureSwipe((index: number, event: TabsAnimationEvent) =&gt; {
      <span class="hljs-comment">// 在页面跟手滑动过程中，逐帧触发该回调。</span>
      <span class="hljs-keyword">let</span> currentIndicatorInfo = <span class="hljs-keyword">this</span>.getCurrentIndicatorInfo(index, event)
      <span class="hljs-keyword">this</span>.currentIndex = currentIndicatorInfo.index
      <span class="hljs-keyword">this</span>.indicatorLeftMargin = currentIndicatorInfo.left
      <span class="hljs-keyword">this</span>.indicatorWidth = currentIndicatorInfo.width
    })
  }
  .width(<span class="hljs-string">'100%'</span>)
  .height(<span class="hljs-string">'100%'</span>)
  .align(Alignment.TopStart)
  <span class="hljs-comment">// .padding({top:20})</span>
}.width(<span class="hljs-string">'100%'</span>).height(<span class="hljs-string">'100%'</span>)
.backgroundImageSize(ImageSize.Cover)

}


private getTextInfo(index: number): Record<string, number> {
let rectangle = this.componentUtils.getRectangleById(index.toString())
return { ‘left’: px2vp(rectangle.windowOffset.x), ‘width’: px2vp(rectangle.size.width) }
}


private getCurrentIndicatorInfo(index: number, event: TabsAnimationEvent): Record<string, number> {
let nextIndex = index
if (index > 0 && event.currentOffset > 0) {
nextIndex–
} else if (index < 3 && event.currentOffset < 0) {
nextIndex++
}


<span class="hljs-keyword">let</span> indexInfo = <span class="hljs-keyword">this</span>.getTextInfo(index)
<span class="hljs-keyword">let</span> nextIndexInfo = <span class="hljs-keyword">this</span>.getTextInfo(nextIndex)
<span class="hljs-keyword">let</span> swipeRatio = <span class="hljs-built_in">Math</span>.abs(event.currentOffset / <span class="hljs-keyword">this</span>.tabsWidth)
<span class="hljs-keyword">let</span> currentIndex = swipeRatio &gt; <span class="hljs-number">0.5</span> ? nextIndex : index <span class="hljs-comment">// 页面滑动超过一半，tabBar切换到下一页。</span>
<span class="hljs-keyword">let</span> currentLeft = indexInfo.left + (nextIndexInfo.left - indexInfo.left) * swipeRatio
<span class="hljs-keyword">let</span> currentWidth = indexInfo.width + (nextIndexInfo.width - indexInfo.width) * swipeRatio
<span class="hljs-keyword">return</span> { <span class="hljs-string">'index'</span>: currentIndex, <span class="hljs-string">'left'</span>: currentLeft, <span class="hljs-string">'width'</span>: currentWidth }

}


private startAnimateTo(duration: number, leftMargin: number, width: number) {
animateTo({
duration: duration, // 动画时长
curve: Curve.Linear, // 动画曲线
iterations: 1, // 播放次数
playMode: PlayMode.Normal, // 动画模式
onFinish: () => {
console.info(‘play end’)
}
}, () => {
this.indicatorLeftMargin = leftMargin
this.indicatorWidth = width
})
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

```

文档链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5#事件

更多关于HarmonyOS 鸿蒙Next tabs滑动出现延迟显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next tabs滑动出现延迟显示的问题通常与以下几个因素有关：

  1. UI渲染性能：滑动延迟可能是由于界面元素过多或复杂，导致渲染速度跟不上滑动速度。建议检查并优化界面布局，减少不必要的UI组件，提高渲染效率。

  2. 动画与过渡效果：如果设置了滑动时的动画或过渡效果，这些效果可能会增加延迟。尝试调整或禁用这些效果，观察是否有所改善。

  3. 系统资源占用：后台运行的应用或服务可能会占用系统资源，影响前台应用的流畅性。检查并关闭不必要的后台应用，释放系统资源。

  4. 触摸响应速度：系统或硬件的触摸响应速度不足也可能导致滑动延迟。确保系统更新到最新版本，同时检查触控硬件是否正常工作。

  5. 内存与存储：设备内存或存储空间不足同样会影响应用性能。清理内存和存储空间，确保应用有足够的资源运行。

针对上述问题，逐一排查并尝试解决。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部