HarmonyOS 可滚动组件的惯性衰减偏移修正

在可滚动列表视图中,希望在手指拖拽结束后对最终定位的偏移量进行修正,比如可以在拖拽之后将当前item的中心点定位到屏幕中间为止。

HarmonyOS
2024-08-29 15:14:35
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可以看看是不是需要这个效果:

xxx.ets

import display from '@ohos.display'; 
 
@Entry 
@Component 
struct page { 
 screenH: number = 0 
 private arr: number[] = [] 
 private scroller: Scroller = new Scroller() 
 
 aboutToAppear(): void { 
  let displayClass: display.Display | null = null; 
  displayClass = display.getDefaultDisplaySync() 
  this.screenH = px2vp(displayClass.height) 
  for (let i = 0; i < 50; i++) { 
   this.arr.push(i) 
  } 
 } 
 
 build() { 
  Column() { 
   List({ space: 20, initialIndex: 0, scroller: this.scroller }) { 
    ForEach(this.arr, (item: number) => { 
     ListItem() { 
      Text('' + item) 
       .width('100%') 
       .height(100) 
       .fontSize(16) 
       .textAlign(TextAlign.Center) 
       .borderRadius(10) 
       .backgroundColor(0xFFFFFF) 
     } 
    }, (item: string) => item) 
   } 
   .listDirection(Axis.Vertical) // 排列方向 
   .scrollBar(BarState.Off) 
   .friction(0.6) 
   .divider({ 
    strokeWidth: 2, 
    color: 0xFFFFFF, 
    startMargin: 20, 
    endMargin: 20 
   }) // 每行之间的分界线 
   .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring 
   .width('90%') 
   .onScrollStop(() => { 
    this.scroller.scrollToIndex(10, true, ScrollAlign.CENTER) 
   }) 
  } 
  .width('100%') 
  .height('100%') 
  .backgroundColor(0xDCDCDC) 
 
  // .padding({ top: 5 }) 
 } 
}
分享
微博
QQ
微信
回复
2024-08-29 16:56:22
相关问题
如何获取Scroll组件的当前滚动偏移
2125浏览 • 1回复 待解决
HarmonyOS 移动GridItemGrid组件
240浏览 • 1回复 待解决
如何获取List组件滚动滚动距离
2543浏览 • 1回复 待解决
HarmonyOS 如何隐藏Web组件滚动条?
473浏览 • 2回复 待解决
列表滑动惯性处理问题
251浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动问题
506浏览 • 1回复 待解决
基于滚动组件手势处理
425浏览 • 1回复 待解决
HarmonyOS Tabs组件Tab栏滚动问题
497浏览 • 1回复 待解决
HarmonyOS使用Web组件如何监听滚动位置
552浏览 • 2回复 待解决