鸿蒙 ArkTS Tabs组件实现类微信（可滑动的）tabBar页签切换页面功能 ...

关键词：harmonyOS   鸿蒙开发  ArkTS  TabContent
使用场景：类微信底部导航栏，点击/左右滑动切换页面并加载数据
开发环境：ArkTS3.1  API9  Phone设备
HMOS Dev官方文档：文档中央
演示效果：

目录
完整Demo已提交至Gitee
搭建页面
自界说TabContent（往后翻有完整代码）
思路
开始
完整自界说tabs代码
页面切换后怎样加载新数据
介绍
父子组件表明
开始
页面切换时可加载新数据的完整代码

---

   完整Demo已提交至Gitee，传送门：
  鸿蒙ArkTS tabBar页签切换Demo: HarmonyOS鸿蒙ArkTS tabBar页签切换完整项目Demo
  

搭建页面

我这里用三个页面举例，新建home、info、mine页面，创建components目录存放自界说Tabs组件，目录结构如下，我这里已经预备了6个图标图片存放在了resources/rawfile/tabs

自界说Tabs（附完整代码）

思路

index为应用加载的首页，加载自界说Tabs组件，Tabs组件中加载各个页面

开始

HMOS Dev官方文档 TabContent ：文档中央
1.起首在index.est中导入自界说Tabs组件，避免与官方组件冲突取名comTabs

2.在自界说Tabs组件中导入所建的三个页面[如图3]，记得在页面中使用export导出[如图4]

[左图3 | 右图4]
3.设置一个PAGE的枚举，增强可读性，不喜欢用就0123代替，因为页面切换的回调函数返回的数值从0开始，所以给currentIndex默认设置为0即为home页（@State装饰器修饰的属性当状态改变时，UI会发生对应的渲染改变），changePage本身写来用于更新页面数据函数，稍后会用到。别忘了new TabsController()[如图3]
4.官方提供了多种页签样式，我们使用置于底部的，将Tabs中barPosition属性设置为BarPosition.End。Tabs将占用整个页面，所以宽高需设置为100%。
Tabs组件中需要TabContent来加载页面。[如图5]
在tabBar中自界说页签按钮样式，因重复代码太多，我们可以利用@Builder装饰器来自界说构建函数复用代码。[如图6]
留意：自界说页签设置onClick事件用于改变页面索引，Tabs组件需设置onChange事件，否则页面左右滑动页签状态不会改变。

[图5]

[图6]  

完整自界说tabs代码

1. // tabs.ets
3. // home页
4. import Home from '../pages/home/home'
5. // info页
6. import Info from '../pages/info/info'
7. // mine页
8. import Mine from '../pages/mine/mine'
10. enum PAGE{
11.   HOME = 0,
12.   INFO = 1,
13.   MINE = 2
14. }
16. @Preview
17. @Component
18. export default  struct compTabs{
19.   @State currentIndex: number = 0;
20.   private tabsController: TabsController = new TabsController();
22.   changePage(e){
23.     this.currentIndex = e
24.     if (e == PAGE.HOME){
25.     }
26.     if (e == PAGE.INFO){
27.     }
28.     if (e == PAGE.MINE){
29.     }
30.   }
32.   @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
33.     Column() {
34.       Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
35.         .size({ width: 20, height: 20 }).objectFit(ImageFit.Fill)
36.       Text(title)
37.         .fontColor(this.currentIndex === targetIndex ? '#484D54' : '#ff969da9')
38.         .fontSize(10).margin({top:3,bottom:3})
39.     }
40.     .width('100%')
41.     .height(67)
42.     .alignItems(HorizontalAlign.Center)
43.     .backgroundColor('#fff')
44.     .justifyContent(FlexAlign.Center)
45.     .onClick(() => {
46.       this.currentIndex = targetIndex;
47.       this.tabsController.changeIndex(targetIndex);
48.     })
49.   }
51.   build() {
52.     Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
53.       TabContent() {
54.         Home()
55.       }.tabBar(this.TabBuilder('首页', 0, $rawfile('tabs/home_a.png'), $rawfile('tabs/home.png')))
57.       TabContent() {
58.         Info()
59.       }.tabBar(this.TabBuilder('信息', 1, $rawfile('tabs/service_a.png'), $rawfile('tabs/service.png')))
61.       TabContent() {
62.         Mine()
63.       }.tabBar(this.TabBuilder('我的', 2, $rawfile('tabs/me_a.png'), $rawfile('tabs/me.png')))
64.     }.onChange((index: number) => {
65.       this.changePage(index)
66.     })
67.     .width('100%')
68.     .height('100%')
69.   }
70. }

复制代码

页面切换后怎样加载新数据

介绍

需要留意的是，在tabContent中不管有多少个页面都会被一次性加载完，切换页面不会达到页面更新的效果。那么页面切换后，怎样加载页面的数据呢，很简单，可以利用官方提供的@Link装饰器（父子双向同步）向子组件传递一个时间戳参数过去，页面中使用@Watch监听这个时间戳属性的变革触发自界说的customShow函数。
大概可以增加 if 判定页面索引使其重新加载

父子组件表明

在上述的tabs报告中导入了home页面、info页面、mine页面，那这三个页面就相当于是tabs的子组件了

开始

1.给子组件设置@Link修饰的timer属性（@Link修饰不用赋初值）
2.利用@watch监听一个自界说函数customShow，当父组件的这个timer改变时子组件就会触发这个函数[如图9]
3.父组件Tabs设置三个属性HomeTimer、InfoTimer、MineTimer，分别记录每个页面的时间戳，新增timeStamp函数返回当前时间戳，在changePage函数触发时获取最新的时间戳[如图7]，TabContent中页面里传参时别忘了$符号[如图8]。

[图7]

[图8]

[图9]
同样可以自界说页面的烧毁等等，这是我在鸿蒙开发中最常用最省事最高效的办法了，大家不妨试试。

页面切换时可加载新数据的完整代码

Tabs.est

1. // Tabs.ets
3. // home页
4. import Home from '../pages/home/home'
5. // info页
6. import Info from '../pages/info/info'
7. // mine页
8. import Mine from '../pages/mine/mine'
10. enum PAGE{
11.   HOME = 0,
12.   INFO = 1,
13.   MINE = 2
14. }
16. @Preview
17. @Component
18. export default  struct compTabs{
19.   @State currentIndex: number = 0;
20.   @State HomeTimer: number = 0;
21.   @State InfoTimer: number = 0;
22.   @State MineTimer: number = 0;
23.   private tabsController: TabsController = new TabsController();
25.   changePage(e){
26.     this.currentIndex = e
27.     if (e == PAGE.HOME){
28.       this.HomeTimer = this.timeStamp()
29.     }
30.     if (e == PAGE.INFO){
31.       this.InfoTimer = this.timeStamp()
32.     }
33.     if (e == PAGE.MINE){
34.       this.MineTimer = this.timeStamp()
35.     }
36.   }
38.   timeStamp(){
39.     return new Date().getTime();
40.   }
42.   @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
43.     Column() {
44.       Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
45.         .size({ width: 20, height: 20 }).objectFit(ImageFit.Fill)
46.       Text(title)
47.         .fontColor(this.currentIndex === targetIndex ? '#484D54' : '#ff969da9')
48.         .fontSize(10).margin({top:3,bottom:3})
49.     }
50.     .width('100%')
51.     .height(67)
52.     .alignItems(HorizontalAlign.Center)
53.     .backgroundColor('#fff')
54.     .justifyContent(FlexAlign.Center)
55.     .onClick(() => {
56.       this.currentIndex = targetIndex;
57.       this.tabsController.changeIndex(targetIndex);
58.     })
59.   }
61.   build() {
62.     Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
63.       TabContent() {
64.         Home({ timer:$HomeTimer })
65.       }.tabBar(this.TabBuilder('首页', 0, $rawfile('tabs/home_a.png'), $rawfile('tabs/home.png')))
67.       TabContent() {
68.         Info({ timer:$InfoTimer })
69.       }.tabBar(this.TabBuilder('信息', 1, $rawfile('tabs/service_a.png'), $rawfile('tabs/service.png')))
71.       TabContent() {
72.         Mine({ timer:$MineTimer })
73.       }.tabBar(this.TabBuilder('我的', 2, $rawfile('tabs/me_a.png'), $rawfile('tabs/me.png')))
74.     }.onChange((index: number) => {
75.       this.changePage(index)
76.     })
77.     .width('100%')
78.     .height('100%')
79.   }
80. }

复制代码

home.est

1. import promptAction from '@ohos.promptAction';
3. @Component
4. export default struct Home {
5.   @State message: string = 'home页面'
6.   @Link @Watch('customShow') timer: Number
8.   customShow(){
9.     promptAction.showToast({
10.       message: "页面展示"
11.     });
12.   }
14.   build() {
15.     Row() {
16.       Column() {
17.         Text(this.message)
18.           .fontSize(50)
19.           .fontWeight(FontWeight.Bold)
20.       }
21.       .width('100%')
22.     }
23.     .height('100%')
24.   }
25. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。