1.实现效果展示： 

2.图标准备

我使用的是iconfont图标，下面为项目中所使用到的图标

3. 代码

（1）Index.ets：

import {InfoTop} from '../component/InfoTop'
import {InfoCenter} from '../component/InfoCenter'
import {InfoBottom} from '../component/InfoBottom'@Entry
@Component
struct Index {@State currentPage:number = 0build(){Column() {InfoTop()InfoCenter()InfoBottom({selectCurrent:this.currentPage})}.width('100%').height('100%')}
}

（2）InfoTop 组件：

import font from '@ohos.font';@Component
export struct InfoTop {aboutToAppear():void{font.registerFont({familyName:'infoTop',familySrc:'/fonts/iconfont.ttf'})}build(){Column(){Row(){Image($r('app.media.avatar')).height(48).width(48).borderRadius(24).margin({right:18})//搜索框Row(){Text('\ue7d2').fontFamily('infoTop').fontSize(20)Text('HarmonyOS Next').textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(1).layoutWeight(1)}.border({width:1}).height(40).layoutWeight(1).padding(10).borderRadius(20)Text('\ue613').fontFamily('infoTop').fontSize(35).margin({left:24,right:18})Text('\ue673').fontFamily('infoTop').fontSize(35)}.width('100%')}.padding(10).width('100%')}
}

（3）InfoCenter组件：

import font from '@ohos.font';
import {HomeRecommend} from './HomeRecommend'
@Component
export struct InfoCenter {aboutToAppear():void{font.registerFont({familyName:'infoCenter',familySrc:'/fonts/iconfont.ttf'})}@State navTop:string[] = ['直播','推荐','热门','动画','影视','新征程']@State selectCurrent:number = 1 //默认为推荐页面@State swiperImg:Resource[] = [$r('app.media.swiper_phone_01'),$r('app.media.swiper_phone_03'),$r('app.media.swiper_phone_00')]@BuildertabNavBuilder(index:number){Text(this.navTop[index]).border({width:{bottom:this.selectCurrent==index?2:0},color:this.selectCurrent==index?'#ffec839a':Color.Black}).fontColor(this.selectCurrent==index ?'#ffec839a':Color.Black).textOverflow({overflow:TextOverflow.Clip}).maxLines(1)}@BuildermoreBuilder(){Column(){Text('\ue643').fontFamily('infoCenter').fontSize(20).backgroundColor(Color.White)}}build(){Column() {Tabs({barPosition:BarPosition.Start}){ForEach(this.navTop,(item:string,index)=>{TabContent(){//内容HomeRecommend()}.tabBar(this.tabNavBuilder(index))if(index == this.navTop.length-1){TabContent(){}.tabBar(this.moreBuilder())}})}.onChange((index:number)=>{if(index == this.navTop.length){console.log('跳转页面')return;}this.selectCurrent = index})}.height('80%').width('100%')}
}

InfoCenter中的HomeRecommend组件

import font from '@ohos.font';interface   recommendData{img:Resourcetitle:stringusername:string
}@Component
export struct HomeRecommend{aboutToAppear():void{font.registerFont({familyName:'recommendChannel',familySrc:'/fonts/iconfont.ttf'})}@State recommendList:recommendData[] = [{img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},{img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},{img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},{img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},{img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},{img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},{img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'},{img:$r('app.media.harmonyOs'),title:'使用HarmonyOs Next开发b站首页的推荐,喜欢本期视频的观众朋友，可以关注一下up主',username:'XXX'}]build(){Column(){Swiper(){Image($r('app.media.harmonyOs'))Image($r('app.media.harmonyOs'))Image($r('app.media.harmonyOs'))}.width('100%').height(200).autoPlay(true).interval(2000).margin(10).indicator(Indicator.dot().itemWidth(10).itemHeight(10).color(Color.Gray).selectedItemWidth(10).selectedItemHeight(10).selectedColor(Color.White))List(){ForEach(this.recommendList,(item:recommendData,index)=>{ListItem(){Column(){Image(item.img).width('100%').borderRadius({topRight:10,topLeft:10})Text(item.title).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(2).width('100%').padding(5)Row(){Row({space:15}){Text('\ue665').fontFamily('recommendChannel').margin({left:11}).fontSize(22)Text(item.username)}Text('\ue75f').fontFamily('recommendChannel')}.margin({top:10}).width('100%').justifyContent(FlexAlign.SpaceBetween)}.backgroundColor(Color.White).width('100%')}})}.padding(2).lanes(2,15)}.backgroundColor('#ffefefef').height('100%').width('100%')}}

（4）InfoBottom组件：

import font from '@ohos.font';interface IBottomNav{title:stringfont:string
}@Component
export struct InfoBottom{aboutToAppear():void{font.registerFont({familyName:'infoBottom',familySrc:'/fonts/iconfont.ttf'})}@Link selectCurrent:number@State bottomNav:IBottomNav[] = [{ title:'首页',font:'\ue61f' },{ title:'动态',font:'\ue625' },{ title:'会员购',font:'\ue601' },{ title:'我的',font:'\ue600' }]@State offsetNav:number = 0@BuilderbottomNavBuilder(item:IBottomNav,index:number){Column(){Text(item.font).fontFamily('infoBottom').fontSize(40)//感觉图标1和图标2都有点细小，进行加粗.fontWeight(index == 0 || index == 1 ? FontWeight.Bold:FontWeight.Normal).fontColor(this.selectCurrent == index ? '#fff162d2':Color.Black)Text(item.title).fontColor(this.selectCurrent == index ? '#fff162d2':Color.Black)}}@BuilderaddBuilder(){Text('\ue696;').fontFamily('infoBottom').fontSize(60).fontColor('#fff162d2')}build(){Column(){Tabs({barPosition:BarPosition.Start}){ForEach(this.bottomNav,(item:IBottomNav,index)=>{TabContent(){}.tabBar(this.bottomNavBuilder(item,index))//放在中间-1之后的第一位位置if(this.bottomNav.length/2 == index + 1){TabContent(){}.tabBar( this.addBuilder())}})}.animationDuration(0).onChange((index:number)=>{if(index == this.bottomNav.length/2 ){//跳转上传页面return;}if(index > this.bottomNav.length/2 ){this.selectCurrent = index - 1}else{this.selectCurrent = index}})}.border({width:{top:1},style:BorderStyle.Dotted}).padding(5).height(80).width('100%')}
}