HarmonyOS 使用scroll组件效果异常

界面布局竖直方向太多时候，使用scroll支持竖直滚动，但滚动会回弹，无法正常操作，把edgeEffect(EdgeEffect.None)设置成None后，不会回弹了，但是也不滚动了。

代码：

@Component
export struct MinePage {
  @Consume isLogin: boolean
  @State titleBarPadding: string = '0'
  scroller: Scroller = new Scroller()
  aboutToAppear(): void {
    // 获取系统顶部导航栏的高度
    this.titleBarPadding = getSystemBarHeight()
  }

  build() {
    Scroll(this.scroller) {
      Column() {
        // 第一部分： 消息提示和购买 1.0版本暂时隐藏
        PageHeader()
        // 第二部分：  云手机用户登录信息
        UserAvatar()
        // 第三部分：  订单等服务 1.0版本暂时隐藏
        Shortcuts()
        //  第五部分： 我的云手机等的列表
        ManageList()
      }
      .width('100%')
      .height('100%')
      .padding({
        left: $r('app.float.padding_16'),
        right: $r('app.float.padding_16'),
        top: this.titleBarPadding
      })
      .backgroundColor('#F5F1FB')
    }
    .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
    .scrollBar(BarState.On) // 滚动条不显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth('4') // 滚动条宽度
    .friction(0.6)
    .edgeEffect(EdgeEffect.None)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

HarmonyOS

zbw_apple

2024-12-24 17:47:06

浏览

回答 1

按赞同

按时间

fox280

参考示例代码：

@Entry
@Component
export struct Index {
  private isLogin: boolean = true
  @State titleBarPadding: string = '0'
  scroller: Scroller = new Scroller()
  private arr1: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  aboutToAppear(): void {
    // 获取系统顶部导航栏的高度
    this.titleBarPadding = '30'
  }

  build() {
    Scroll() {
      Column() {
        Row() {
          Text("PageHeader")
        }.backgroundColor(Color.Red).height(200)

        Row() {
          Text("UserAvatar")
        }.backgroundColor(Color.Orange)

        Row() {
          Text("Shortcuts")
        }.backgroundColor(Color.Blue).margin({ bottom: 100 })

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

@Component
struct ManageList {
  scrollerList: Scroller = new Scroller()
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Column() {
      List({ space: 20, scroller: this.scrollerList }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text("ListItem" + item)
              .width("100%")
              .height("100%")
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.White)
          }.width("100%").height(100)
        }, (item: string) => item)
      }
      .width("100%")
      .height("100%")
      .edgeEffect(EdgeEffect.None)
      .friction(0.6)
    }.width('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.

2024-12-24 19:04:10

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 使用scroll组件效果异常

订阅鸿蒙技术特刊，精选内容抢先看