HarmonyOS 详细内容见具体描述

具体代码：

@Entry
@Component
struct DDUserCenterPage {
  //tab的索引
  @State currentIndex: number = 0
  //tab控制器
  controller: TabsController = new TabsController()
  scrollScroller: Scroller = new Scroller()
  @State scrollOffset: number = 0
  build() {
    Column() {
      //标题
      Row() {
        Text('我是标题')
      }
      .height(60)
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .backgroundColor(this.scrollOffset > 100 ? '#007edb' : 'rgba(0,0,0,0.1)')
      //.backgroundColor(this.scrollOffset > 100 ? '#007edb' : Color.Transparent)
      .animation({ duration: 300 })
      .zIndex(0)
      //滚动区域
      Scroll(this.scrollScroller) {
        //scroll内唯一根组件
        Column() {
          //scroll Area
          Text('scroll Area')
            .width('100%')
            .height(200)
            .textAlign(TextAlign.Center)
            .backgroundColor('#007edb')
          //tab
          Column() {
            //自定义tabbar
            Row({ space: 30 }) {
              ForEach(Array.from({ length: 2 }), (item: number, index: number) => {
                Text(`页签${index}`)
                  .height(50)
                  .fontColor(this.currentIndex == index ? '#f00' : '#000')
                  .onClick(() => {
                    this.currentIndex = index
                    this.controller.changeIndex(this.currentIndex)
                  })
                Text('|')
              })
            }
            .backgroundColor('#fff')
            .width('100%')
            .justifyContent(FlexAlign.Center)
            .position({ x: 0, y: 0 }) //tabbar绝对定位0，0
            .zIndex(1)
            //真正的tab
            Tabs({ controller: this.controller }) {
              TabContent() {
                Scroll() {
                  Column() {
                    Text('可能被tabbar遮住的内容')
                      .height(60)
                      .backgroundColor('#666')
                    Text('内容1')
                      .width('100%')
                      .fontSize(30)
                      .height(1500)
                      .textAlign(TextAlign.Center)
                      .backgroundColor('#999')
                  }
                }
                .nestedScroll({
                  //设置向上推时父子组件一起滚动
                  scrollForward: NestedScrollMode.PARALLEL,
                  //设置向下拉时父组件优先滚动
                  scrollBackward: NestedScrollMode.PARENT_FIRST
                })
              }
              TabContent() {
                Scroll() {
                  Text('内容2')
                    .width('100%')
                    .fontSize(30)
                    .height(1500)
                    .textAlign(TextAlign.Center)
                    .backgroundColor('#999')
                }
              }
            }
            .margin({ top: 50 }) //将被tabbar定位遮住的部分露出来
            .barHeight(0) //设置tabs自带tabbar的高为0
            .onChange(index => {
              this.currentIndex = index
            })
          }
        }
      }
      .width('100%')
      .layoutWeight(1)
      .onScroll(() => {
        this.scrollOffset = this.scrollScroller.currentOffset().yOffset
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f6f6f6')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.

1，Text('我是标题')这个组件怎么覆盖到 Text('scroll Area') 这个组件的上面，两者是重叠关系。

2，基于问题1的重叠效果，上划操作的时候‘页签0’和‘页签1’ 怎么悬停在Text('我是标题')的下面。

HarmonyOS

fox280

2024-12-24 17:12:05

浏览

回答 1

按赞同

按时间

zxjiu

参考示例demo：

enum ScrollPosition { start, center, end }
@Entry
@Component
struct NestedScroll {
  @State listPosition: number = ScrollPosition.start; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。
  @State scrollPosition: number = ScrollPosition.start; // 0代表滚动到页面顶部，1代表中间值，2代表滚动到页面底部。
  @State showTitle: boolean = false;
  @State currentYOffset: number = 0;
  private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  private scrollerForScroll: Scroller = new Scroller();
  private scrollerForList: Scroller = new Scroller();
  controller: TextInputController = new TextInputController()
  build() {
    Stack({ alignContent: Alignment.Top }) {
      Scroll(this.scrollerForScroll) {
        Column() {
          Column() {
          }.width("100%").height("40%").backgroundColor(Color.Pink)
          Tabs({ barPosition: BarPosition.Start }) {
            TabContent() {
              List({ space: 10, scroller: this.scrollerForList }) {
                ForEach(this.arr, (item: number) => {
                  ListItem() {
                    Text("促销商品" + item)
                      .width("100%")
                      .height("100%")
                      .borderRadius(15)
                      .fontSize(24)
                      .textAlign(TextAlign.Center)
                      .backgroundColor(Color.White)
                  }
                  .width("100%").height(100)
                }, (item: string) => item)
              }
              .padding({ left: 10, right: 10 })
              .width("100%")
              .edgeEffect(EdgeEffect.None)
              .scrollBar(BarState.Off)
              .onReachStart(() => {
                this.listPosition = ScrollPosition.start
              })
              .onReachEnd(() => {
                this.listPosition = ScrollPosition.end
              })
              .onScrollFrameBegin((offset: number, state: ScrollState) => {
                // 滑动到列表中间时
                if (!((this.listPosition == ScrollPosition.start && offset < 0) ||
                  (this.listPosition == ScrollPosition.end && offset > 0))) {
                  this.listPosition = ScrollPosition.center
                }
                // 如果页面已滚动到底部，列表不在顶部或列表有正向偏移量
                if (this.scrollPosition == ScrollPosition.end &&
                  (this.listPosition != ScrollPosition.start || offset > 0)) {
                  return { offsetRemain: offset };
                } else {
                  this.scrollerForScroll.scrollBy(0, offset)
                  return { offsetRemain: 0 };
                }
              })
            }.tabBar('促销活动')
            TabContent() {
              List({ space: 10, scroller: this.scrollerForList }) {
                ForEach(this.arr, (item: number) => {
                  ListItem() {
                    Text("行程安排" + item)
                      .width("100%")
                      .height("100%")
                      .borderRadius(15)
                      .fontSize(24)
                      .textAlign(TextAlign.Center)
                      .backgroundColor(Color.White)
                  }
                  .width("100%").height(100)
                }, (item: string) => item)
              }
              .padding({ left: 10, right: 10 })
              .width("100%")
              .edgeEffect(EdgeEffect.None)
              .scrollBar(BarState.Off)
              .onReachStart(() => {
                this.listPosition = ScrollPosition.start
              })
              .onReachEnd(() => {
                this.listPosition = ScrollPosition.end
              })
              .onScrollFrameBegin((offset: number, state: ScrollState) => {
                // 滑动到列表中间时
                if (!((this.listPosition == ScrollPosition.start && offset < 0) ||
                  (this.listPosition == ScrollPosition.end && offset > 0))) {
                  this.listPosition = ScrollPosition.center
                }
                // 如果页面已滚动到底部，列表不在顶部或列表有正向偏移量
                if (this.scrollPosition == ScrollPosition.end &&
                  (this.listPosition != ScrollPosition.start || offset > 0)) {
                  return { offsetRemain: offset };
                } else {
                  this.scrollerForScroll.scrollBy(0, offset)
                  return { offsetRemain: 0 };
                }
              })
            }
            .tabBar('行程服务')
          }
          .vertical(false)
          .barMode(BarMode.Fixed)
          .barWidth(360)
          .barHeight(56)
          .width("100%")
          .height("92%")
          .backgroundColor('#F1F3F5')
        }
      }
      .scrollBar(BarState.Off)
      .width("100%")
      .height("100%")
      .onScroll((xOffset: number, yOffset: number) => {
        this.currentYOffset = this.scrollerForScroll.currentOffset().yOffset;
        // 非（页面在顶部或页面在底部），则页面在中间
        if (!((this.scrollPosition == ScrollPosition.start && yOffset < 0) ||
          (this.scrollPosition == ScrollPosition.end && yOffset > 0))) {
          this.scrollPosition = ScrollPosition.center
        }
      })
      .onScrollEdge((side: Edge) => {
        if (side == Edge.Top) {
          // 页面在顶部
          this.scrollPosition = ScrollPosition.start
        } else if (side == Edge.Bottom) {
          // 页面在底部
          this.scrollPosition = ScrollPosition.end
        }
      })
      .onScrollFrameBegin(offset => {
        if (this.scrollPosition == ScrollPosition.end) {
          return { offsetRemain: 0 };
        } else {
          return { offsetRemain: offset };
        }
      })
      Row() {
        Text('活动标题')
          .width('100%')
          .fontSize(24)
          .backgroundColor(Color.Orange)
          .height(60)
      }
      .justifyContent(FlexAlign.Center)
      .backgroundColor('#00ffffff')
      .width('100%')
      .height('8%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.

2024-12-24 18:56:00

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 详细内容见具体描述

订阅鸿蒙技术特刊，精选内容抢先看