HarmonyOS 鸿蒙Next:tabs作为底部导航,如何切换时避免重复刷新

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next:tabs作为底部导航,如何切换时避免重复刷新

我做了一个商城app。底部使用tabs,每个tabContent放的自定义组件,当第一次进入按需加载当前内容,但是切换回来的时候又刷新一次,如何避免第二次重复刷新,只有用户下拉时才刷新??

也就是说第一次加载之后不再刷新UI?

20 回复

API 12了有什么更好的实现方法么

不确定你是怎么写的。下面是我写的,没有出现重复刷新的情况,给你一个参考:

cke_770.png

我问问题已经解决了,你这么写跟我当初写的一样,这样切换会导致重复刷新,你应该修改if判断

有要学HarmonyOS AI的同学吗,联系我:https://www.itying.com/goods-1206.html

Component 中的 aboutToAppear  呢

这个不行

维护一个状态就可以了。鸿蒙的控件是通过[@state](/user/state)变化刷新的;如果是使用node,可以通过添加veiw和删除view刷新。

你说的Node是什么意思?

是鸿蒙另一种使用view的方式,drawing

这个第一次听说哦,不会用

你这个没有看懂哦,我是这样做的: build() { Column() { Tabs({ barPosition: BarPosition.End, index: this.tabCurrentIndex}) { TabContent() { Watching() }.tabBar(‘追剧’)

    TabContent() {
      VideoSwiper({ pageFlag: $pageFlag })
    }.tabBar('推荐')

    TabContent() {
      Theater()
    }.tabBar('剧场')

    TabContent() {
      MyComp();
    }.tabBar('我的')
  }.vertical(false).barMode(BarMode.Fixed).scrollable(false).onChange((index: number) => {
    this.tabCurrentIndex = index;
    if (index == 1) {
      this.pageFlag.state = false;
    } else {
      this.pageFlag.state = true;
    }
  })
}.height('100%').width('100%')

}

就是把点击过的tabbar存到数组中,数组中存在就不会重新加载组件了

这样啊,好的老铁,我试试,谢谢你

你的tabcontent里面是用if包裹的自定义组件把

刚开始我就是没有加if,但会全部加载,切换不会刷新页面。但是这样会影响启动的速度,因为把里面的内容全部加载了,我觉得这样用户体验不好

生命周期控制吧

在HarmonyOS鸿蒙Next中,若使用tabs作为底部导航并希望在切换时避免重复刷新,可尝试以下方法:

  1. 利用组件生命周期:Tabs组件切换时,可能会触发相关组件的生命周期方法。确保在组件的生命周期方法中,如onVisibleAreaChange,进行必要的状态判断和数据更新,而非在每次切换时都执行完整的刷新逻辑。
  2. 缓存页面状态:对于每个TabContent,可以设计算法或机制来缓存其状态和数据。当Tab被重新选中时,先检查是否有缓存的状态,如果有则直接恢复,避免重新加载和刷新。
  3. 优化数据获取逻辑:确保数据获取逻辑是高效的,并且在必要时才执行。例如,可以使用数据懒加载或分页加载技术,以减少不必要的网络请求和数据处理。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部