tab的tabContent中 使用 nestscroll+tab 吸顶 条目显示不全

问题原因:ListItem 被 Tabs 挡住了

解决方案一:

在列表结尾处多渲染一个空的 ListItem

解决方案二:使用 contentEndOffset API 实现列表结尾偏移

@ComponentV2
export struct PageList002 {
  @Local arr: number[] = []

  aboutToAppear() {
    for (let i = 0; i < 30; i++) {
      this.arr.push(i)
    }
  }

  @Local selectedIndex: number = 0
  private controller: TabsController = new TabsController()
  private listScroller: ListScroller = new ListScroller()
  @Styles
  listCard() {
    .backgroundColor(Color.White)
    .height(72)
    .width("100%")
    .borderRadius(12)
  }
  //Tabs的简单使用可以查看之前的文章,案例演示
  tabs: string[] = ['生活服务', '办公必备', '出行出差'];
  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.selectedIndex === index ? '#007DFF' : '#182431')
        .fontSize(16)
        .fontWeight(this.selectedIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .width(20)
        .margin({bottom:15})
        .color('#007DFF')
        .opacity(this.selectedIndex === index ? 1 : 0)
    }.width(81)
  }

  build() {
    Scroll() {
      Column() {
        Text("Scroll Area")
          .width("100%")
          .height("40%")
          .backgroundColor('#0080DC')
          .textAlign(TextAlign.Center)
        Column() {
          Tabs({ index :this.selectedIndex,barPosition: BarPosition.Start, controller: this.controller }) {
            ForEach(this.tabs, (item: string, index: number) => {
              TabContent() {
              }.tabBar(this.tabBuilder(index, item))
            })
          }
          .animationMode(AnimationMode.NO_ANIMATION)
          .animationDuration(0)
          .height('auto')
          .onChange((index: number) => {
            // currentIndex控制TabContent显示页签
            if (index==0) {
              this.listScroller.scrollToIndex(0)
            }else if (index==1){
              this.listScroller.scrollToIndex(10)
            }else {
              this.listScroller.scrollToIndex(20)
            }
          })
          List({ space: 10 ,scroller:this.listScroller}) {
            ForEach(this.arr, (item: number) => {
              ListItem() {
                Text("item" + item)
                  .fontSize(16)
              }.listCard()
            }, (item: string) => item)
          }.width("100%")
          .edgeEffect(EdgeEffect.Spring)
          .nestedScroll({
            scrollForward: NestedScrollMode.PARENT_FIRST,
            scrollBackward: NestedScrollMode.SELF_FIRST
          })
          .onScrollIndex((start: number, end: number, center: number) => {
            // if (start<10) {
            //   this.selectedIndex=0;
            // }else if (start>=10&&start<20){
            //   this.selectedIndex=1;
            // }else if (start>=20){
            //   this.selectedIndex=2;
            // }


            //如果条目比较少很容易划回去
            if (center<10  && this.selectedIndex != 0) {
              this.selectedIndex=0;
            }else if (center>=10&&center<20 && this.selectedIndex != 1){
              this.selectedIndex=1;
            }else if (center>=20 && this.selectedIndex != 2){
              this.selectedIndex=2;
            }

          })

        }.height('100%')
        Blank().height(52)
      }.width("100%")
    }
    .edgeEffect(EdgeEffect.None)
    .friction(0.6)
    .backgroundColor('#DCDCDC')
    .scrollBar(BarState.Off)
    .width('100%')
    .height('100%')
  }

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值