滚动吸顶效果实现案例

Stack({ alignContent: Alignment.Top }) {
  Flex({ justifyContent: FlexAlign.SpaceBetween }) { 
    // 头像和二维码页面布局代码
    // ...
  }
  Scroll(this.scroller) {
    // ...
  }
  .onDidScroll(() => {
    // 获取滑动距离
    const yOffset: number = this.scroller.currentOffset().yOffset;
    // this.searchHeight 随 yOffset变化的公式。按需调整。
    this.searchHeight = this.searchHeightRaw - yOffset * 0.6;
  })
}

Stack({ alignContent: Alignment.Top }) { 
  // 图标背景为白色快捷功能区
  IconView({
    isChange: this.isChange,
    marginSpace: this.marginSpace,
    opacity1: this.opacity1
  })

  // Scroll滚动子组件
  Scroll(this.scroller2) { 
    // 向上滑动透明的横向快捷区逐渐显示的布局代码
    // 上图下文字透明背景样式布局代码
    // 商品列表组件布局代码
    // ...
  }
}

.onDidScroll(() => {
  // 通过Scroll的偏移量来动态修改透明度、尺寸和颜色等属性
  // ...
})

Scroll(this.scroller2){
  // ...
}
.width('100%')
.scrollBar(BarState.Off)
.nestedScroll({
  scrollForward: NestedScrollMode.PARENT_FIRST, // 可滚动组件往末尾端滚动时的嵌套滚动选项,父组件先滚动，父组件滚动到边缘以后自身滚动。
  scrollBackward: NestedScrollMode.SELF_FIRST // 可滚动组件往起始端滚动时的嵌套滚动选项,自身先滚动，自身滚动到边缘以后父组件滚动。
})

WaterFlow() {
  LazyForEach(this.productData, (item: ProductDataModel) => {
    FlowItem() {
      // ...
  }, (item: ProductDataModel) => item.id.toString())
}
.nestedScroll({
  scrollForward: NestedScrollMode.PARENT_FIRST,
  scrollBackward: NestedScrollMode.SELF_FIRST
})
.columnsTemplate("1fr 1fr")
}

aboutToAppear() {
    // 创建DisplaySync对象
    this.displaySync = displaySync.create();
    // 设置期望帧率
    const range: ExpectedFrameRateRange = {
      expected: 120,
      min: 60,
      max: 120
    };
    this.displaySync.setExpectedFrameRateRange(range);
    // 添加帧回调
    this.displaySync.on("frame", () => {
      // 第一帧中加载前两条数据
      if (this.frame === 1) {
        this.productData.pushData(PRODUCT_DATA.slice(0, 2))
        this.frame += 1;
      } else if (this.frame === 2) {
        // 第二帧中放入剩余数据
        this.productData.pushData(PRODUCT_DATA.slice(2, PRODUCT_DATA.length));
        this.frame += 1;
        this.displaySync?.stop();
      }
    });
    // 开启帧回调监听
    this.displaySync.start();
  }

componentstack                                   // har类型
|---mock
|   |---IconMock.ets                             // 本地数据源 
|---model
|   |---DataSource.ets                           // 列表数据模型
|   |---IconModel.ets                            // 数据类型定义 
|---view
|   |---ComponentStack.ets                       // 滚动吸顶效果实现案例主页面 
|   |---IconView.ets                             // 按钮快捷入口自定义组件 
|   |---ProductList.ets                          // 商品列表自定义组件