鸿蒙实现吸顶效果的方式

最新推荐文章于 2024-05-13 22:07:27 发布

等风起了

最新推荐文章于 2024-05-13 22:07:27 发布

阅读量1.1k

点赞数 14

分类专栏：鸿蒙文章标签：鸿蒙吸顶效果

本文链接：https://blog.csdn.net/Abner_Crazy/article/details/136472828

版权

鸿蒙专栏收录该内容

22 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在DevEcoStudio中使用`Tabs`组件，通过`barPosition`属性设置为`Start`并配合`nestedScroll`处理滚动事件，确保了Tab在滚动时始终保持顶部。作者提供了实际的代码示例来展示这一实现过程。

摘要由CSDN通过智能技术生成

前言:

DevEcoStudio版本：

"compileSdkVersion": 10

效果：

原理分析：

基于Tabs的barPosition属性，设置Tabs的页签位置：BarPosition.Start。这样就能保证在滚动的时候tab位于顶部。因为本身布局是Scroll嵌套List所以需要对滚动事件进行处理。通过List的nestedScroll属性（API 10的属性）设置向前向后两个方向上的嵌套滚动模式。

当向上滑动时：Scroll滑动，List不滑动，当Tabs吸顶后List在滑动。

当向下滑动时：List不在顶部，List滑动，Scroll不滑动，List滑动到顶部后Scroll再滑动。

List(){
   //......
}
.nestedScroll({
   scrollForward: NestedScrollMode.PARENT_FIRST,
   scrollBackward: NestedScrollMode.SELF_FIRST
})

详细代码：

@Entry
@Component
struct Index {
   @State list: number[] = []

   aboutToAppear() {//添加测试数据
      for (let i = 0; i < 30; i++) {
         this.list.push(i)
      }
   }

   @Styles
   listStyle() {
      .backgroundColor(Color.White)
      .height(72)
      .width("100%")
      .borderRadius(12)
   }

   @Builder
   TabBuilder(title: string) {
      Column() {
         Text(title)
            .fontSize(20)
            .fontColor(Color.White)
      }
      .padding({ top: 10, bottom: 10 })
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.Pink)
      .height(56)
      .width('100%')
   }

   build() {
      Scroll() {
         Column() {
            Text("头部滚动区域")
               .width("100%")
               .height("30%")
               .fontSize(20)
               .fontColor(Color.White)
               .backgroundColor('#0080DC')
               .textAlign(TextAlign.Center)

            Tabs() {
               TabContent() {
                  List({ space: 10 }) {
                     ForEach(this.list, (item: number) => {
                        ListItem() {
                           Text("item" + item).fontSize(16)
                        }.listStyle()
                     }, (item: string) => item)
                  }.width("100%")
                  .height('100%')
                  .edgeEffect(EdgeEffect.None)
                  .nestedScroll({
                     scrollForward: NestedScrollMode.PARENT_FIRST,
                     scrollBackward: NestedScrollMode.SELF_FIRST
                  })
               }.tabBar(this.TabBuilder("我是吸顶布局"))
            }
            .vertical(false)
            .height("100%")
         }.width("100%")
      }
      .edgeEffect(EdgeEffect.None)
      .backgroundColor('#DCDCDC')
      .scrollBar(BarState.Off)
      .width('100%')
      .height('100%')
   }
}