湘潭交通網(wǎng)站網(wǎng)頁(yè)查詢
序言：
本文詳細(xì)講解了關(guān)于我們?cè)陧?yè)面上經(jīng)?？吹降目蓾L動(dòng)頁(yè)面和導(dǎo)航欄在鴻蒙開發(fā)中如何用Scroll和Tabs組件實(shí)現(xiàn)，介紹了Scroll和Tabs的基本用法與屬性。
筆者也是跟著B站黑馬的課程一步步學(xué)習(xí)，學(xué)習(xí)的過(guò)程中添加部分自己的想法整理為筆記分享出來(lái)，如有代碼錯(cuò)誤或筆誤，歡迎指正。
B站黑馬的課程鏈接：鴻蒙課程介紹_嗶哩嗶哩_bilibili
往期筆記：
【01】純血鴻蒙HarmonyOS NEXT星河版開發(fā)0基礎(chǔ)學(xué)習(xí)筆記-ArkTs基礎(chǔ)語(yǔ)法與界面開發(fā)基礎(chǔ)
【02】純血鴻蒙HarmonyOS NEXT星河版開發(fā)0基礎(chǔ)學(xué)習(xí)筆記-界面進(jìn)階與布局排布（附QQ登陸、得物、京東登陸綜合案例+代碼）
【03】純血鴻蒙HarmonyOS NEXT星河版開發(fā)0基礎(chǔ)學(xué)習(xí)筆記-更多布局（彈性/層疊）方式與界面開發(fā)綜合（附飛狗卡片+B站卡片案例+實(shí)戰(zhàn)開發(fā)支付寶界面+代碼）
【04】純血鴻蒙HarmonyOS NEXT星河版開發(fā)0基礎(chǔ)學(xué)習(xí)筆記-ArkTs進(jìn)階運(yùn)算符+狀態(tài)管理（附綜合案例美團(tuán)購(gòu)物車）
【05】純血鴻蒙HarmonyOS NEXT星河版開發(fā)0基礎(chǔ)學(xué)習(xí)筆記-條件渲染+if/switch判斷與for/while循環(huán)（附計(jì)數(shù)器、京東加購(gòu)案例）
【06】純血鴻蒙HarmonyOS NEXT星河版開發(fā)0基礎(chǔ)學(xué)習(xí)筆記-綜合案例·生肖抽獎(jiǎng)卡具體實(shí)現(xiàn)（類似支付寶集五福）
【07】純血鴻蒙HarmonyOS NEXT星河版開發(fā)0基礎(chǔ)學(xué)習(xí)筆記-Swiper輪播組件與樣式&結(jié)構(gòu)重用
目錄
一.滾動(dòng)容器Scroll
1.Scroll-核心用法
2.Scroll-常見屬性
3.Scroll-控制器
4.Scroll-事件
5.Scroll-京東案例
二.Tabs組件
1.Tabs-基本使用
2.Tabs-自定義TabBar-基礎(chǔ)結(jié)構(gòu)
3.Tabs-自定義TabBar-高亮切換
一.滾動(dòng)容器Scroll
簡(jiǎn)介：當(dāng)子組件的布局尺寸超出Scroll的尺寸時(shí)，內(nèi)容可以滾動(dòng)
1.Scroll-核心用法
1）用法說(shuō)明：
①Scroll設(shè)置尺寸
②設(shè)置溢出的子組件（只支持一個(gè)子組件）
③滾動(dòng)方向（支持橫向和縱向，默認(rèn)縱向）
2）代碼示意：
build() {Scroll(){//只支持一個(gè)子組件Column(){//內(nèi)容放在內(nèi)部//尺寸超過(guò)Scroll即可滾動(dòng)}}.width('100%').height(200).scrollable(ScrollDirection.xxx)//設(shè)置滾動(dòng)方向}
//.scrollable(ScrollDirection.Vertical) 縱向
//.scrollable(ScrollDirection.Horizontal)橫向2.Scroll-常見屬性
1）常用參數(shù)：
| 名稱 | 參數(shù)類型 | 描述 |
| scrollBar | BarState | 設(shè)置滾動(dòng)條狀態(tài) |
| scrollBarColor | string|number|Color | 設(shè)置滾動(dòng)條顏色 |
| scrollBarWidth | string|number | 設(shè)置滾動(dòng)條寬度 |
| edgeEffect | value:EdgeEffect | 設(shè)置邊緣滑動(dòng)效果 EdgeEffect.None 無(wú) EdgeEffect.Spring 彈簧 EdgeEffect.Fade 陰影 |
| scrollable | ScrollDirection | 設(shè)置滾動(dòng)方向 ScrollDirection.Vertical) 縱向 ScrollDirection.Horizontal)橫向 |
2）代碼示意：
build() {Column() {Scroll() {Column() {ForEach(Array.from({ length: 10 }), (item: string, index) => {Text('測(cè)試文本').width('100%').height(100).backgroundColor(Color.Grey).margin(20)})}.padding(10).width('100%')}.width('100%').height(400).scrollable(ScrollDirection.Vertical) //設(shè)置滾動(dòng)方向.scrollBar(BarState.On) //On令滾動(dòng)條恒存在 Off恒隱藏 Auto滑動(dòng)顯示.scrollBarColor(Color.Blue) //滾動(dòng)條顏色.scrollBarWidth(5) //滾動(dòng)條寬度.edgeEffect(EdgeEffect.Spring) //滾動(dòng)條彈簧效果}}
?
3.Scroll-控制器
1）核心步驟：
①實(shí)例化Scroll的控制器
②綁定給Scroll組件
③控制器的方法控制滾動(dòng)，控制其屬性獲取滾動(dòng)距離
2）代碼示意：
struct Index {//1.創(chuàng)建Scroller對(duì)象（實(shí)例化）myscroller:Scroller = new Scroller()build() {Column({ space: 10 }) {Scroll(this.myscroller) {Column() {ForEach(Array.from({ length: 10 }), (irem: string, index) => {Text('測(cè)試文本').width('100%').height(100).backgroundColor(Color.Grey).margin(20)})}.padding(10).width('100%')}.width('100%').height(400).scrollable(ScrollDirection.Vertical) //設(shè)置滾動(dòng)方向.scrollBar(BarState.On) //On令滾動(dòng)條恒存在 Off恒隱藏 Auto滑動(dòng)顯示.scrollBarColor(Color.Blue) //滾動(dòng)條顏色.scrollBarWidth(5) //滾動(dòng)條寬度.edgeEffect(EdgeEffect.Spring) //滾動(dòng)條彈簧效果Button('控制滾動(dòng)條位置').margin(20).onClick(()=>{this.myscroller.scrollEdge(Edge.Top) //控制滾動(dòng)條到頂部})Button('獲取已經(jīng)滾動(dòng)的距離').onClick(()=>{const y = this.myscroller.currentOffset().yOffsetAlertDialog.show({message:`'y':${y}`})})}}
}
?
4.Scroll-事件
簡(jiǎn)介：Scroll組件提供了一些事件，讓開發(fā)者可以在適當(dāng)?shù)臅r(shí)候添加邏輯。
Scroll(){//內(nèi)容略}.onScroll((x,y))=>{//滾動(dòng)時(shí) 一直觸發(fā)//可以結(jié)合 scroller的currentOffset方案，獲取滾動(dòng)距離}1）代碼示意：
Scroll(this.myscroller) {Column() {ForEach(Array.from({ length: 10 }), (irem: string, index) => {Text('測(cè)試文本').width('100%').height(100).backgroundColor(Color.Grey).margin(20)})}.padding(10).width('100%')}.width('100%').height(400).scrollable(ScrollDirection.Vertical) //設(shè)置滾動(dòng)方向.scrollBar(BarState.On) //On令滾動(dòng)條恒存在 Off恒隱藏 Auto滑動(dòng)顯示.scrollBarColor(Color.Blue) //滾動(dòng)條顏色.scrollBarWidth(5) //滾動(dòng)條寬度.edgeEffect(EdgeEffect.Spring) //滾動(dòng)條彈簧效果.onScroll((x,y)=>{console.log('已經(jīng)滑動(dòng)的距離：',this.myscroller.currentOffset().yOffset)})
?
5.Scroll-京東案例
1）代碼示意：
@Entry
@Component
struct Index {//1.創(chuàng)建Scroll實(shí)例對(duì)象myscroller:Scroller = new Scroller()@State yOffset:number = 0 //實(shí)時(shí)保存y軸距離build() {Column() {Stack({ alignContent: Alignment.BottomEnd }) {// 頂部滾動(dòng)區(qū)域//2.和scroller容器綁定Scroll(this.myscroller) {Column() {Image($r('app.media.ic_jd_scroll_01'))Image($r('app.media.ic_jd_scroll_02'))Image($r('app.media.ic_jd_scroll_03'))}}.scrollBar(BarState.Off).width('100%').backgroundColor(Color.Orange).onScroll(()=>{this.yOffset=this.myscroller.currentOffset().yOffset})//有時(shí)顯示有時(shí)隱藏可以用條件渲染if(this.yOffset>400)Image($r('app.media.ic_jd_rocket')).width(40).backgroundColor(Color.White).borderRadius(20).padding(5)// .margin({right:20,bottom:20}).offset({ x: -20, y: -20 }).onClick(()=>{this.myscroller.scrollEdge(Edge.Top)})}.layoutWeight(1)// 底部 tabbar 圖片(后面會(huì)學(xué))Image($r('app.media.ic_jd_tab')).width('100%')}}
}
?
二.Tabs組件
當(dāng)頁(yè)面內(nèi)容較多時(shí)，可以通過(guò)Tabs組件進(jìn)行分類展示
Tab里面還可以有Tab
1.Tabs-基本使用
1）基本用法：
Tabs(){TabContent(){Text('首頁(yè)內(nèi)容') //有且只能有一個(gè)子組件，如果內(nèi)容比較復(fù)雜，可以用Column這種}.tabBar('首頁(yè)') //配置導(dǎo)航TabContent(){Text('推薦內(nèi)容') //有且只能有一個(gè)子組件，如果內(nèi)容比較復(fù)雜，可以用Column這種}.tabBar('推薦') //配置導(dǎo)航TabContent(){Text('發(fā)現(xiàn)內(nèi)容') //有且只能有一個(gè)子組件，如果內(nèi)容比較復(fù)雜，可以用Column這種}.tabBar('發(fā)現(xiàn)') //配置導(dǎo)航TabContent(){Text('我的') //有且只能有一個(gè)子組件，如果內(nèi)容比較復(fù)雜，可以用Column這種}.tabBar('我的') //配置導(dǎo)航}
?
2）常用屬性
| 名稱 | 作用 |
| barPosition | 調(diào)整位置 開頭 或 結(jié)尾 參數(shù) |
| vertical | 調(diào)整導(dǎo)航 水平 或 垂直 |
| scrollable | 調(diào)整是否手勢(shì)滑動(dòng) 切換 |
| animationDuration | 點(diǎn)擊滑動(dòng)動(dòng)畫時(shí)間 |
①寫法位置
?
3）滾動(dòng)導(dǎo)航欄
如果導(dǎo)航欄的內(nèi)容較多，屏幕無(wú)法容納時(shí)，可以將它設(shè)置為滾動(dòng)
可以通過(guò)Tabs組件的barMode屬性即可調(diào)整固定導(dǎo)航欄或滾動(dòng)導(dǎo)航欄
①代碼示意：
tieles:string[]=['首頁(yè)','關(guān)注','熱門','軍事','體育','八卦','數(shù)碼','財(cái)經(jīng)','美食','旅行',]//生成十個(gè)面板+十個(gè)小導(dǎo)航Tabs(){ForEach(this.tieles,(item:string,index)=>{TabContent(){Text('我是內(nèi)容')}.tabBar(`${item}內(nèi)容`)})}.barMode(BarMode.Scrollable)
?
2.Tabs-自定義TabBar-基礎(chǔ)結(jié)構(gòu)
TabBar在底部，一般會(huì)顯示圖形和文字，甚至有一些特殊logo
1）代碼示意：
@Entry
@Component
struct Index {@BuildermyBuilder(title:string,img:ResourceStr){Column(){Image(img).width(30)Text(title)}}build() {Tabs({barPosition:BarPosition.End}){TabContent(){Text('購(gòu)物車內(nèi)容')}.tabBar(this.myBuilder('購(gòu)物車',$r('app.media.ic_tabbar_icon_2')))TabContent(){Text('我的內(nèi)容')}.tabBar(this.myBuilder('我的',$r('app.media.ic_tabbar_icon_3')))}}
}
?
3.Tabs-自定義TabBar-高亮切換
1）核心思路：
①監(jiān)聽切換事件→得到索引值，記錄高亮的索引
②給每個(gè)tabber起一個(gè)標(biāo)記，0,1,2
③在taber內(nèi)部比較標(biāo)記==記錄的索引？高亮：不高亮
| 名稱 | 功能描述 |
| onChange(event:(index:number)=>void) | Tab頁(yè)簽切換后觸發(fā)的事件。 -index：當(dāng)前顯示的index索引，索引從0開始計(jì)算。 滑動(dòng)切換、點(diǎn)擊切換 均會(huì)觸發(fā) |
| onTabbarClick(event:(index:number)=>void)10+ | Tab頁(yè)簽點(diǎn)擊后觸發(fā)的事件。 -index：被點(diǎn)擊的index索引，索引從0開始計(jì)算。 |
2）代碼示意：
@Entry
@Component
struct Index {//準(zhǔn)備狀態(tài)，存儲(chǔ)激活的索引@State selectIndex:number=0@BuildermyBuilder(itemIndex:number,title:string,img:ResourceStr,selImg:ResourceStr){//如果激活的是自己，圖文/文本，都需要調(diào)整樣式->需要區(qū)分不同的 tabarColumn(){Image(itemIndex==this.selectIndex?selImg:img).width(30)Text(title).fontColor(itemIndex==this.selectIndex?Color.Red:Color.Black)}}build() {Tabs({barPosition:BarPosition.End}){TabContent(){Text('購(gòu)物車內(nèi)容')}.tabBar(this.myBuilder(0,'購(gòu)物車',$r('app.media.ic_tabbar_icon_2'),$r('app.media.ic_tabbar_icon_2_selected')))TabContent(){Text('我的內(nèi)容')}.tabBar(this.myBuilder(1,'我的',$r('app.media.ic_tabbar_icon_3'),$r('app.media.ic_tabbar_icon_3_selected')))}.onChange((index:number)=>{/*console.log('激活的索引',index)*/this.selectIndex = index})}}
?
感謝觀看