HarmonyOS：页面滚动时标题悬浮、背景渐变

一、需求场景

• 进入到app首页或者分页列表首页时，随着页面滚动，分类tab要求固定悬浮在顶部。
• 进入到app首页、者分页列表首页、商品详情页时，页面滚动时，顶部导航栏（菜单、标题）背景渐变。

二、相关技术知识点

• Scroll：可滚动容器，其中nestedScroll：设置父组件的滚动联动、onDidScroll：滚动事件回调
• Stack：堆叠容器

三、解决方案

1. 使用Stack层叠布局，将标题栏悬浮展示在页面顶部。
2. 考虑页面滚动以及tabContent里面的list滚动就要考虑滚动嵌套问题目前场景需要选择：
   向上滚动时，父组件先滚动，父组件滚动到边缘以后自身滚动；
   向下滚动时：自身先滚动，自身滚动到边缘以后父组件滚动。

四、示例

效果图

示例代码：TestStickyNestedScroll.ets

import AppStorageConstants from '../../common/AppStorageConstants';@Entry
@Component
struct TestStickyNestedScroll {@State arr: number[] = [];@State opacityNum: number = 0;@State curYOffset: number = 0;@State statusBarHeight: number = 20@State bottomNavBarHeight: number = 20@State navIndicatorHeight: number| undefined = 28aboutToAppear(): void {for (let index = 0; index < 40; index++) {this.arr.push(index);}let tempStatusBarHeight: number | undefined = AppStorage.get(AppStorageConstants.STATUS_BAR_HEIGHT)this.statusBarHeight = tempStatusBarHeight == undefined ? 20 : tempStatusBarHeightthis.navIndicatorHeight = AppStorage.get(AppStorageConstants.NAV_INDICATOR_HEIGHT)// let typeSys = window.AvoidAreaType.TYPE_SYSTEM;// let typeNavIndicator = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR;// window.getLastWindow(getContext(this)).then((data) => {//   // 获取系统默认区域，一般包括状态栏、导航栏//   let avoidArea1 = data.getWindowAvoidArea(typeSys);//   // 顶部状态栏高度//   let orginStatusBarHeight = avoidArea1.topRect.height;//////   this.statusBarHeight = this.getUIContext().px2vp(orginStatusBarHeight);//   console.log("顶部状态栏高度 statusBarHeight = " + this.statusBarHeight + " vp,  orginStatusBarHeight = " +//     orginStatusBarHeight + " px");//   // 部状态栏高度 statusBarHeight = 32.92307692307692 vp,  orginStatusBarHeight = 107 px////   // 底部导航条区域高度//   let avoidArea2 = data.getWindowAvoidArea(typeNavIndicator);//   let orginNavIndicator = avoidArea2.bottomRect.height//   this.navIndicatorHeight = this.getUIContext().px2vp(orginNavIndicator);//   console.log("底部导航条区域高度 navIndicatorHeight = " + this.navIndicatorHeight +//     " vp,  orginNavIndicator = " +//     orginNavIndicator + " px");//   // 底部导航条区域高度 navIndicatorHeight = 28 vp,  orginNavIndicator = 91 px////   //底部导航栏的高度//   let orginBottomStatusBarHeight = avoidArea1.bottomRect.height;//   this.bottomNavBarHeight = this.getUIContext().px2vp(orginBottomStatusBarHeight);//   console.log("底部导航栏的高度 statusBarHeight = " + this.bottomNavBarHeight + " vp,  orginBottomStatusBarHeight = " +//     orginBottomStatusBarHeight + " px");//   // 底部导航栏的高度 statusBarHeight = 0 vp,  orginBottomStatusBarHeight = 0 px// })}@StyleslistCard() {.backgroundColor(Color.White).height(72).width('calc(100% - 20vp)').borderRadius(12).margin({ left: 10, right: 10 })}build() {Stack() {Scroll() {Column({ space: 10 }) {Image($r('app.media.mount')).width('100%').height(300)Tabs({ barPosition: BarPosition.Start }) {TabContent() {List({ space: 10 }) {ForEach(this.arr, (item: number) => {ListItem() {Text("item " + item).fontSize(20).fontColor(Color.Black)}.listCard()}, (item: number) => item.toString())}.edgeEffect(EdgeEffect.Spring).nestedScroll({scrollForward: NestedScrollMode.PARENT_FIRST,scrollBackward: NestedScrollMode.SELF_FIRST})}.tabBar("待处理")TabContent() {}.tabBar("已处理")}.scrollable(false) // 禁掉滚动.vertical(false).width("100%").height('calc(100% - 60vp)')}.width('100%')}.edgeEffect(EdgeEffect.Spring).friction(0.6).backgroundColor('#DCDCDC').scrollBar(BarState.Off).width('100%').height('100%').onDidScroll((xOffset: number, yOffset: number, scrollState: ScrollState): void => {// 累计计算当前父组件滚动在Y轴方向的偏移量this.curYOffset += yOffset// 根据父组件一共可以滚动的距离计算当前每帧的当前透明度let opacity = this.curYOffset / 240if (opacity >= 1) {opacity = 1}if (opacity <= 0) {opacity = 0}this.opacityNum = opacity})RelativeContainer() { //顶部菜单栏Text("返回").fontSize(16).fontColor(Color.Black).fontWeight(FontWeight.Medium).padding({ left: 20 }).height('100%').alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },left: { anchor: '__container__', align: HorizontalAlign.Start }}).id('back')Text("标题").fontSize(16).fontColor(Color.Black).fontWeight(FontWeight.Medium).textAlign(TextAlign.Center).alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },bottom: { anchor: '__container__', align: VerticalAlign.Bottom },left: { anchor: 'back', align: HorizontalAlign.End },right: { anchor: 'share', align: HorizontalAlign.Start }})Text("分享").fontSize(16).fontColor(Color.Black).fontWeight(FontWeight.Medium).padding({ right: 20 }).height('100%').alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },right: { anchor: '__container__', align: HorizontalAlign.End }}).id('share')}.width('100%').height(44 + this.statusBarHeight).padding({ top: this.statusBarHeight }).position({ x: 0, y: 0 }).backgroundColor(`rgba(255,255,255,${this.opacityNum})`)}.height('100%').width('100%')}
}