tabs结合scroll实现吸顶效果

tabs结合scroll实现吸顶效果

HarmonyOS
2024-05-26 15:33:53
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

希望tab组件的tabbar可以在左侧显示,但是目前默认居中,而且当使用scroll代替tabbar之后就失去了吸顶效果,该实例实现了list结合scroll和tab组件实现tab组件的tabbar可以在左侧显示的需求。

使用的核心API

  •  listItemGroup
  •  Tabs

核心代码解释

通过listItemGroup设置header,在list的sticky属性中,设置吸顶的效果是header,header就是自定义的scroll组件,从而实现了伙伴的需求。

// xxx.ets 
@Entry 
@Component 
struct ListExample { 
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
  @State totalScrollOffset: number = 0; 
  private tabArray: number[] = [0, 1, 2] 
  @State focusIndex: number = 0; 
  private controller: TabsController = new TabsController() 
  
  @Builder 
  myScroll() { 
    Scroll() { 
      Row() { 
        ForEach(this.tabArray, (item: number, index: number) => { 
          Row({ space: 20 }) { 
            Text('页签' + item) 
              .fontWeight(index === this.focusIndex ? FontWeight.Bold : FontWeight.Normal) 
          } 
          .padding({ left: '10fp', right: '10fp' }) 
          .onClick(() => { 
            this.controller.changeIndex(index) 
            this.focusIndex = index 
          }) 
        }) 
      } 
    } 
    .align(Alignment.Start) 
    .scrollable(ScrollDirection.Horizontal) 
    .scrollBar(BarState.Off) 
    .width('100%') 
  } 
  
  build() { 
    Column() { 
      List({ space: 20, initialIndex: 0 }) { 
          ForEach(this.arr, (item: number) => { 
            ListItem() { 
              Text('' + item) 
                .width('100%') 
                .height(100) 
                .fontSize(16) 
                .textAlign(TextAlign.Center) 
                .borderRadius(10) 
                .backgroundColor(0xFFFFFF) 
            } 
          }, (item: string) => item) 
        ListItemGroup({ header:this.myScroll() }) { 
          ListItem() { 
            //tabs组件把tabbar隐藏 
            Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 
              ForEach(this.tabArray, (item: number, index: number) => { 
                TabContent() { 
                  Text('我是页面 ' + item + " 的内容") 
                    .fontSize(30) 
                } 
              }) 
            } 
            .barHeight(20) 
          } 
        } 
      } 
      .sticky(StickyStyle.Header) 
      .listDirection(Axis.Vertical) // 排列方向 
      .scrollBar(BarState.Off) 
      .friction(0.6) 
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 
      .edgeEffect(EdgeEffect.None) 
      .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => { 
        console.info('first' + firstIndex) 
        console.info('last' + lastIndex) 
        console.info('center' + centerIndex) 
      }) 
      .onScroll((scrollOffset: number, scrollState: ScrollState) => { 
        console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset) 
        this.totalScrollOffset += scrollOffset 
        console.log('yeyouzhi>>>' + this.totalScrollOffset) 
      }) 
      .width('90%') 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor(0xDCDCDC) 
    .padding({ top: 5 }) 
  
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 20:35:43
相关问题
如何实现Tabs组件tarbar的顶效果
240浏览 • 1回复 待解决
如何实现通用的顶效果
208浏览 • 1回复 待解决
编写一个页面,实现顶效果
431浏览 • 1回复 待解决
如何实现分组列表的顶/效果
965浏览 • 1回复 待解决
Navigation实现Tabs切换效果
539浏览 • 1回复 待解决
panGesture结合动画实现fling效果
417浏览 • 1回复 待解决
Text实现scroll效果怎么弄?
4120浏览 • 1回复 待解决
如何去掉Scroll回弹效果
294浏览 • 1回复 待解决
基于tabs实现页面布局
222浏览 • 1回复 待解决
页面和列表嵌套滚动,实现列表
524浏览 • 1回复 待解决
Refresh结合lottie实现下拉刷新动画
510浏览 • 1回复 待解决
ListItemGroup 和Lazyforeach结合场景
420浏览 • 1回复 待解决
canvas如何实现水印效果
420浏览 • 1回复 待解决
如何实现星级评分效果
80浏览 • 1回复 待解决
如何实现视频滤镜效果
799浏览 • 1回复 待解决
长按实现各类振动效果
380浏览 • 1回复 待解决
如何实现动画转场效果
399浏览 • 1回复 待解决
实现层叠广告滑动效果
414浏览 • 1回复 待解决