#鸿蒙通关秘籍#如何在HarmonyOS NEXT中实现组件堆叠的多层次视觉效果？

Stack({ alignContent: Alignment.Top }) {
  Scroll(this.scroller) {
    Column() {
      // 添加内容
    }
    .onScroll(() => {
      let yOffset: number = this.scroller2.currentOffset().yOffset;
      this.Height2 = this.Height2_raw - yOffset * 0.5;

      if (1 - yOffset / this.IconList2_raw >= 0) {
        this.Opacity2 = 1 - yOffset / this.IconList2_raw;
      } else {
        this.Opacity2 = 0;
      }

      this.ratio = this.Opacity2;

      if (1 - yOffset / this.IconList1_raw > 0) {
        this.isChange = false;
        this.Opacity = 1 - yOffset / this.IconList1_raw;
        this.marginSpace = this.maxMarginSpace;
      } else {
        this.isChange = true;
        this.Opacity = (yOffset - this.IconList1_raw) / this.maxMarginSpace;
        this.marginSpace = this.IconList3_raw - yOffset > this.minmarginSpace 
                          ? (this.IconList3_raw - yOffset) 
                          : this.minmarginSpace;
      }
    });
  }
}
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.