HarmonyOS 关于Scroll和List嵌套滚动的悬停问题

我想实现的功能是,Scroll Area 滚动到一半就悬停,但是嵌套的List 并不能滚动到底部(item 28,item 29 被藏住了),有什么办法让下面List的内容能完全的显示出来。代码如下:

@Entry
@Component
struct StickyNestedScroll {
  @State arr: number[] = []
  private stop:boolean = true
  private scroller = new Scroller()
  @Styles
  listCard() {
    .backgroundColor(Color.White)
    .height(72)
    .width("100%")
    .borderRadius(12)
  }

  build() {
    Scroll(this.scroller) {
      Column() {
        Text("Scroll Area")
          .width("100%")
          .height("40%")
          .backgroundColor('#0080DC')
          .textAlign(TextAlign.Center)
          .onAreaChange((_, newValue) => {
            if ( newValue.globalPosition.y && newValue.height) {
              if (Math.abs(newValue.globalPosition.y as number) >=  (newValue.height as number)/2) {
                this.stop = true
              }else {
                this.stop = false
              }
            }else {
              this.stop = false
            }
          })
        Tabs({ barPosition: BarPosition.Start }) {
          TabContent() {
            List({ space: 10 }) {
              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
            })
          }.tabBar("Tab1")

          TabContent() {
          }.tabBar("Tab2")
        }
        .vertical(false)
        .height("100%")
      }.width("100%")
    }
    .onScrollFrameBegin((offset: number) => {
      if (!this.stop) return { offsetRemain: offset };
      if (offset <= 0) return { offsetRemain: offset }
      return {
        offsetRemain: 0
      }
    })
    .edgeEffect(EdgeEffect.Spring)
    .friction(0.6)
    .backgroundColor('#DCDCDC')
    .scrollBar(BarState.Off)
    .width('100%')
    .height('100%')
  }

  aboutToAppear() {
    for (let i = 0; i < 30; i++) {
      this.arr.push(i)
    }
  }
}
HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

Tabs部分可以尝试修改为以下代码

Tabs({ barPosition: BarPosition.Start }) {
  TabContent() {
    List({ space: 10 }) {
      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
    })
  }.tabBar("Tab1")

  TabContent() {
  }.tabBar("Tab2")
}
.vertical(false)
.height("80%")

将高度设置为80%

根因为写100%的话,滑动后加上上面text部分,总高则为120%,超出了屏幕展示区域;原本text设置的40%,滑动一半为20%,下面tabs就只能占高为80%。

分享
微博
QQ
微信
回复
2天前
相关问题
scrolllist嵌套滑动
1546浏览 • 1回复 待解决
HarmonyOS scrolllist滚动冲突
435浏览 • 1回复 待解决
refresh + scroll+list嵌套问题
399浏览 • 1回复 待解决
HarmonyOS Scroll+web+list嵌套滑行
34浏览 • 1回复 待解决
HarmonyOS scroll嵌套List不能整体滑动
516浏览 • 1回复 待解决
HarmonyOS ListWeb嵌套问题
30浏览 • 1回复 待解决
HarmonyOS Web组件List嵌套使用问题
287浏览 • 1回复 待解决
HarmonyOS scroll嵌套list页面无法滑动
40浏览 • 1回复 待解决
HarmonyOS Scroll 嵌套 RelativeContainer 问题
516浏览 • 1回复 待解决
HarmonyOS Scroll嵌套RelativeContainer 问题
351浏览 • 1回复 待解决
WebList嵌套手势冲突问题
1043浏览 • 1回复 待解决
HarmonyOS scroll滚动问题
36浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动问题
626浏览 • 1回复 待解决