HarmonyOS 鸿蒙Next Tabs 页面切换 子组建数据更新切换更新 TabContent 页面切换 @Component子组件数据更新最优解

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

HarmonyOS 鸿蒙Next Tabs 页面切换 子组建数据更新切换更新 TabContent 页面切换 @Component子组件数据更新最优解
有好多帖子在tabs切换时，在TabContent中进行了页面 currentIndex 的下标判断，这样做会让整个页面重新渲染。可以把页面下标传递给子组件，在子组件中使用@Watch装饰器对接收的父组件下标进行装饰，达到状态变量更改通知。具体使用如下

父组件中的tabs Tabs({ index: this.currentIndex }) { TabContent() { QualityNumView({ homeTabIndex: this.currentIndex }) }

TabContent() { TodayAlarmView({ homeTabIndex: this.currentIndex }) }

TabContent() { DeviceLocationView({ homeTabIndex: this.currentIndex }) }

TabContent() { GasTypeView({ homeTabIndex: this.currentIndex }) } } .animationDuration(0) .layoutWeight(1) .height(AppConstants.FULL_PERCENT) .width(AppConstants.FULL_PERCENT) .barHeight(0) .scrollable(false) .onChange((index) => { this.currentIndex = index; this.tabTile = HomeTabsInfo[index].title })

子组件中如下： 这样做每次切换就只会加载onRefresh方法请求数据 ，首次加载页面进入方法aboutToAppear

@Component export struct GasTypeView { //使用@Watch装饰器 状态变量更改通知 如果父组件的下标更改了 //那就会接收到通知进入onRefresh方法 在onRefresh中进行数据请求 @Link @Watch(‘onRefresh’) homeTabIndex: number

//后边进行tab页面切换就会进入此方法 onRefresh() { if (this.homeTabIndex === 1) { this.getData() } }

//子组件中aboutToAppear方法只会加载一次 aboutToAppear(): void { if (this.homeTabIndex === 1) { this.getData() } }

getData() { // 进行数据请求 }

build() { } }


更多关于HarmonyOS 鸿蒙Next Tabs 页面切换 子组建数据更新切换更新 TabContent 页面切换 @Component子组件数据更新最优解的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
4 回复

有没有一种可能tabs的数量是变化的，而且也无法确定某个页面的具体index是多少，所以，这种硬编码只适合于tabs固定不变的情况。

更多关于HarmonyOS 鸿蒙Next Tabs 页面切换 子组建数据更新切换更新 TabContent 页面切换 @Component子组件数据更新最优解的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这种写法适用于固定index，打开应用的固定tabs，为了防止整个页面重新绘制，这种方法切换页面只更新页面数据。动态tabs页面添加的还没尝试过，这种方法应该可以吧，根据数据集合下标变化进入不同方法，

感谢分享

在HarmonyOS鸿蒙系统中，针对Next Tabs页面切换时子组件数据更新的最优解，可以通过以下方式实现：

首先，确保你的Tabs组件和各个TabContent子组件之间建立了正确的数据绑定关系。在Tabs组件中，可以通过状态管理（如使用@State变量）来控制当前选中的Tab，并将这个状态传递给各个TabContent子组件。

在TabContent子组件中，通过监听父组件传递过来的状态变量（例如，通过@Link或@ObservedObject等机制），当Tabs组件切换时，状态变量会发生变化，从而触发TabContent子组件的更新。

为了优化数据更新，可以考虑以下几点：

  1. 避免不必要的重新渲染：确保只有与当前Tab相关的数据才会在切换时更新，其他Tab的数据保持不变。

  2. 使用高效的数据结构：如果数据量大，考虑使用更高效的数据结构来存储和访问数据。

  3. 延迟加载：对于非当前Tab的内容，可以考虑实现延迟加载，即在切换到该Tab时才加载相关数据。

  4. 缓存机制：对于不经常变化的数据，可以实现缓存机制，减少重复加载和渲染的开销。

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

回到顶部