關(guān)鍵詞：harmonyOS? ?鴻蒙開發(fā)??ArkTS??TabContent
使用場(chǎng)景：類微信底部導(dǎo)航欄，點(diǎn)擊/左右滑動(dòng)切換頁面并加載數(shù)據(jù)
開發(fā)環(huán)境：ArkTS3.1? API9? Phone設(shè)備
HMOS Dev官方文檔：文檔中心
演示效果：
目錄
完整Demo已提交至Gitee
搭建頁面
自定義TabContent（往后翻有完整代碼）
思路
開始
完整自定義tabs代碼
頁面切換后如何加載新數(shù)據(jù)
介紹
父子組件解釋
開始
頁面切換時(shí)可加載新數(shù)據(jù)的完整代碼
完整Demo已提交至Gitee，傳送門：
鴻蒙ArkTS tabBar頁簽切換Demo: HarmonyOS鴻蒙ArkTS tabBar頁簽切換完整項(xiàng)目Demo
搭建頁面
我這里用三個(gè)頁面舉例，新建home、info、mine頁面，創(chuàng)建components目錄存放自定義Tabs組件，目錄結(jié)構(gòu)如下，我這里已經(jīng)準(zhǔn)備了6個(gè)圖標(biāo)圖片存放在了resources/rawfile/tabs
自定義Tabs（附完整代碼）
思路
index為應(yīng)用加載的首頁，加載自定義Tabs組件，Tabs組件中加載各個(gè)頁面
開始
HMOS Dev官方文檔 TabContent ：文檔中心
1.首先在index.est中導(dǎo)入自定義Tabs組件，避免與官方組件沖突取名comTabs
2.在自定義Tabs組件中導(dǎo)入所建的三個(gè)頁面[如圖3]，記得在頁面中使用export導(dǎo)出[如圖4]
[左圖3 | 右圖4]
3.設(shè)置一個(gè)PAGE的枚舉，增強(qiáng)可讀性，不喜歡用就0123代替，因?yàn)轫撁媲袚Q的回調(diào)函數(shù)返回的數(shù)值從0開始，所以給currentIndex默認(rèn)設(shè)置為0即為home頁（@State裝飾器修飾的屬性當(dāng)狀態(tài)改變時(shí)，UI會(huì)發(fā)生對(duì)應(yīng)的渲染改變），changePage自己寫來用于更新頁面數(shù)據(jù)函數(shù)，稍后會(huì)用到。別忘了new TabsController()[如圖3]
4.官方提供了多種頁簽樣式，我們使用置于底部的，將Tabs中barPosition屬性設(shè)置為BarPosition.End。Tabs將占用整個(gè)頁面，所以寬高需設(shè)置為100%。
Tabs組件中需要TabContent來加載頁面。[如圖5]
在tabBar中自定義頁簽按鈕樣式，因重復(fù)代碼太多，我們可以利用@Builder裝飾器來自定義構(gòu)建函數(shù)復(fù)用代碼。[如圖6]
注意：自定義頁簽設(shè)置onClick事件用于改變頁面索引，Tabs組件需設(shè)置onChange事件，不然頁面左右滑動(dòng)頁簽狀態(tài)不會(huì)改變。
[圖5]
[圖6]??
完整自定義tabs代碼
// tabs.ets
// home頁
import Home from '../pages/home/home'
// info頁
import Info from '../pages/info/info'
// mine頁
import Mine from '../pages/mine/mine'
enum PAGE{
HOME = 0,
INFO = 1,
MINE = 2
}
@Preview
@Component
export default struct compTabs{
@State currentIndex: number = 0;
private tabsController: TabsController = new TabsController();
changePage(e){
this.currentIndex = e
if (e == PAGE.HOME){
}
if (e == PAGE.INFO){
}
if (e == PAGE.MINE){
}
}
@Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
Column() {
Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
.size({ width: 20, height: 20 }).objectFit(ImageFit.Fill)
Text(title)
.fontColor(this.currentIndex === targetIndex ? '#484D54' : '#ff969da9')
.fontSize(10).margin({top:3,bottom:3})
}
.width('100%')
.height(67)
.alignItems(HorizontalAlign.Center)
.backgroundColor('#fff')
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.currentIndex = targetIndex;
this.tabsController.changeIndex(targetIndex);
})
}
build() {
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
TabContent() {
Home()
}.tabBar(this.TabBuilder('首頁', 0, $rawfile('tabs/home_a.png'), $rawfile('tabs/home.png')))
TabContent() {
Info()
}.tabBar(this.TabBuilder('信息', 1, $rawfile('tabs/service_a.png'), $rawfile('tabs/service.png')))
TabContent() {
Mine()
}.tabBar(this.TabBuilder('我的', 2, $rawfile('tabs/me_a.png'), $rawfile('tabs/me.png')))
}.onChange((index: number) => {
this.changePage(index)
})
.width('100%')
.height('100%')
}
}
頁面切換后如何加載新數(shù)據(jù)
介紹
需要注意的是，在tabContent中不管有多少個(gè)頁面都會(huì)被一次性加載完，切換頁面不會(huì)達(dá)到頁面更新的效果。那么頁面切換后，如何加載頁面的數(shù)據(jù)呢，很簡(jiǎn)單，可以利用官方提供的@Link裝飾器（父子雙向同步）向子組件傳遞一個(gè)時(shí)間戳參數(shù)過去，頁面中使用@Watch監(jiān)聽這個(gè)時(shí)間戳屬性的變化觸發(fā)自定義的customShow函數(shù)。
或者可以增加 if 判斷頁面索引使其重新加載
父子組件解釋
在上述的tabs講述中導(dǎo)入了home頁面、info頁面、mine頁面，那這三個(gè)頁面就相當(dāng)于是tabs的子組件了
開始
1.給子組件設(shè)置@Link修飾的timer屬性（@Link修飾不用賦初值）
2.利用@watch監(jiān)聽一個(gè)自定義函數(shù)customShow，當(dāng)父組件的這個(gè)timer改變時(shí)子組件就會(huì)觸發(fā)這個(gè)函數(shù)[如圖9]
3.父組件Tabs設(shè)置三個(gè)屬性HomeTimer、InfoTimer、MineTimer，分別記錄每個(gè)頁面的時(shí)間戳，新增timeStamp函數(shù)返回當(dāng)前時(shí)間戳，在changePage函數(shù)觸發(fā)時(shí)獲取最新的時(shí)間戳[如圖7]，TabContent中頁面里傳參時(shí)別忘了$符號(hào)[如圖8]。
[圖7]
[圖8]
[圖9]
同樣可以自定義頁面的銷毀等等，這是我在鴻蒙開發(fā)中最常用最省事最高效的辦法了，大家不妨試試。
頁面切換時(shí)可加載新數(shù)據(jù)的完整代碼
Tabs.est文章來源：http://www.zghlxwxcb.cn/news/detail-755431.html
// Tabs.ets
// home頁
import Home from '../pages/home/home'
// info頁
import Info from '../pages/info/info'
// mine頁
import Mine from '../pages/mine/mine'
enum PAGE{
HOME = 0,
INFO = 1,
MINE = 2
}
@Preview
@Component
export default struct compTabs{
@State currentIndex: number = 0;
@State HomeTimer: number = 0;
@State InfoTimer: number = 0;
@State MineTimer: number = 0;
private tabsController: TabsController = new TabsController();
changePage(e){
this.currentIndex = e
if (e == PAGE.HOME){
this.HomeTimer = this.timeStamp()
}
if (e == PAGE.INFO){
this.InfoTimer = this.timeStamp()
}
if (e == PAGE.MINE){
this.MineTimer = this.timeStamp()
}
}
timeStamp(){
return new Date().getTime();
}
@Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
Column() {
Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
.size({ width: 20, height: 20 }).objectFit(ImageFit.Fill)
Text(title)
.fontColor(this.currentIndex === targetIndex ? '#484D54' : '#ff969da9')
.fontSize(10).margin({top:3,bottom:3})
}
.width('100%')
.height(67)
.alignItems(HorizontalAlign.Center)
.backgroundColor('#fff')
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.currentIndex = targetIndex;
this.tabsController.changeIndex(targetIndex);
})
}
build() {
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
TabContent() {
Home({ timer:$HomeTimer })
}.tabBar(this.TabBuilder('首頁', 0, $rawfile('tabs/home_a.png'), $rawfile('tabs/home.png')))
TabContent() {
Info({ timer:$InfoTimer })
}.tabBar(this.TabBuilder('信息', 1, $rawfile('tabs/service_a.png'), $rawfile('tabs/service.png')))
TabContent() {
Mine({ timer:$MineTimer })
}.tabBar(this.TabBuilder('我的', 2, $rawfile('tabs/me_a.png'), $rawfile('tabs/me.png')))
}.onChange((index: number) => {
this.changePage(index)
})
.width('100%')
.height('100%')
}
}
home.est文章來源地址http://www.zghlxwxcb.cn/news/detail-755431.html
import promptAction from '@ohos.promptAction';
@Component
export default struct Home {
@State message: string = 'home頁面'
@Link @Watch('customShow') timer: Number
customShow(){
promptAction.showToast({
message: "頁面展示"
});
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}到了這里，關(guān)于HarmonyOS ArkTS TabContent組件實(shí)現(xiàn)類微信（可滑動(dòng)的）tabBar頁簽切換頁面功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
