List滚动条时长时短,求解决方案?

List滚动条时长时短 。

@Entry 
@Component 
struct ListExample { 
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
  private arrItem: string[] = ["我是评论1", "我是评论2", "我是评论3", "我是评论4", 
    "我是评论5", "我是评论6"] 
  private arrItem2: string[] = ["我是评论1"] 
 
  @Builder 
  itemList(aa: number) { 
    List({ space: 20, initialIndex: 0 }) { 
      if (aa % 2 == 0) { 
        ForEach(this.arrItem, (item: string) => { 
          ListItem() { 
            Text('' + item) 
              .width('100%') 
              .height(50) 
              .fontSize(16) 
              .textAlign(TextAlign.Center) 
              .borderRadius(10) 
              .backgroundColor(0xFFFFFF) 
          } 
        }, (item: string) => item) 
      } else { 
        ForEach(this.arrItem2, (item: string) => { 
          ListItem() { 
            Text('' + item) 
              .width('100%') 
              .height(50) 
              .fontSize(16) 
              .textAlign(TextAlign.Center) 
              .borderRadius(10) 
              .backgroundColor(0xFFFFFF) 
          } 
        }, (item: string) => item) 
      } 
    } 
    .margin({ left: 20 }) 
    .listDirection(Axis.Vertical) 
    .scrollBar(BarState.Off) 
    .width('100%') 
  } 
 
  build() { 
    Column() { 
      List({ space: 20, initialIndex: 0 }) { 
        ForEach(this.arr, (item: number) => { 
          ListItem() { 
            Column({ space: 3 }) { 
              Text('' + item) 
                .width('100%') 
                .height(100) 
                .fontSize(16) 
                .textAlign(TextAlign.Center) 
                .borderRadius(10) 
                .backgroundColor(0xFFFFFF) 
              this.itemList(item) 
            } 
          } 
        }, (item: string) => item) 
      } 
      .listDirection(Axis.Vertical) 
      .scrollBar(BarState.On) 
      .friction(0.6) 
      .edgeEffect(EdgeEffect.Spring) 
      .width('90%') 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor(0xDCDCDC) 
    .padding({ top: 5 }) 
  } 
}
  • 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.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
HarmonyOS
2024-06-03 23:54:01
1.2w浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
唯你而画

这个当前List对自身内容的总高度是根据当前在屏幕内出现的ListItem经过估算得到的,如果ListItem之间的高度不是相对等高的,那么随着ListItem的滑入滑出屏幕,List估算的内容总高度就会产生波动,而滚动条又是根据这个总高度来计算自身的高度的,所以就会体现成在List滑动过程中滚动条的高度一直在产生变化。这个是当前List的实现规格导致的。

规避方案:最外层List改成Scroll。Scroll的内容总高度计算在滑动过程中是稳定的,因此可以保证滚动条不会出现类似List的这种时长时短。

分享
微博
QQ
微信
回复
2024-06-04 22:44:06


相关问题
抓包应用,求解决方案
2547浏览 • 1回复 待解决
如何获取List组件滚动条滚动的距离
3071浏览 • 1回复 待解决
开发疑难问题如下,求解决方案
840浏览 • 1回复 待解决
HarmonyOS 滚动事件相关的解决方案
449浏览 • 1回复 待解决
HarmonyOS webView隐藏滚动条
276浏览 • 1回复 待解决
ListContainer 有滚动条 显示吗?
5934浏览 • 1回复 待解决
请问ScrollView怎么显示滚动条
5913浏览 • 1回复 待解决
HarmonyOS RichText组件如何取消滚动条
284浏览 • 1回复 待解决
如何自定义滚动条的样式?
895浏览 • 1回复 待解决
HarmonyOS Web组件的滚动条如何隐藏
335浏览 • 1回复 待解决
高级图表实现解决方案
1314浏览 • 1回复 待解决
确认网络状况解决方案
1357浏览 • 1回复 待解决
HarmonyOS 通知推送解决方案
788浏览 • 1回复 待解决
HarmonyOS代码封装解决方案
1312浏览 • 1回复 待解决
HarmonyOS 如何隐藏Web组件的滚动条
1005浏览 • 2回复 待解决
HarmonyOS Scroll组件的滚动条怎么隐藏
336浏览 • 1回复 待解决