HarmonyOS 鸿蒙Next 列表滑动惯性处理

可以看下这个demo实现 

[@Entry](/user/Entry)
[@Component](/user/Component)
struct ListExample {
[@State](/user/State) arr: number[] = [0, 1, 2, 3, 4]
private scroller: ListScroller = new ListScroller()
private currentIndex: number = 0 // 当前index
private touchDownX: number = 0 // 标记触摸开始坐标x ，使用场景Axis.Horizontal
private touchDownY: number = 0 // 标记触摸开始坐标y ，使用场景Axis.Vertical
private touchMoveX: number = 0 // 标记拖拽过程坐标x ，使用场景Axis.Horizontal
private touchMoveY: number = 0 // 标记拖拽过程坐标y ，使用场景Axis.Vertical
private isReserve: boolean = false // 标记是否回撤不滚动到对应index
private axis: Axis = Axis.Horizontal // list方向
private isFling = false
build() {
Column() {
List({ space: 0, initialIndex: 0, scroller: this.scroller }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text('' + item)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
}.height('100%').width('100%').backgroundColor(0xFFFFFF)
}, (item: string) => item)
}
.listDirection(this.axis)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)
.nestedScroll({scrollBackward:NestedScrollMode.PARENT_FIRST,scrollForward:NestedScrollMode.PARENT_FIRST})
.width(‘100%’)
.scrollSnapAlign(ScrollSnapAlign.CENTER)
.onScrollIndex((start: number, end: number, center: number) => {
console.log('fxm start = ’ + start + 'end = ’ + end + 'center = ’ + center)
this.currentIndex = center
})
.onScroll( (scrollState: ScrollState)=>{
if(scrollState === ScrollState.Fling)
this.isFling = true
else
this.isFling = false
})
.onTouch((event: TouchEvent) => {
let touchObject: TouchObject = event.touches[0]
if (touchObject.type === TouchType.Down) {
this.onTouchDown(touchObject)
}
if (touchObject.type === TouchType.Up) {
this.onTouchUp(touchObject)
}
if (touchObject.type === TouchType.Move) {
this.onTouchMove(touchObject)
}
})
}
}
onTouchDown(touchObject: TouchObject) {
this.touchDownX = touchObject.x
this.touchDownY = touchObject.y
}
onTouchMove(touchObject: TouchObject) {
this.touchMoveY = touchObject.y
this.touchMoveX = touchObject.x
if (this.axis === Axis.Vertical) {
if (Math.abs(touchObject.y - this.touchDownY) < 50)
this.isReserve = true
else {
if (touchObject.y < this.touchDownY) {
this.isReserve = touchObject.y > this.touchMoveY
} else {
this.isReserve = touchObject.y < this.touchMoveY
}
}
} else {
if (Math.abs(touchObject.x - this.touchDownX) < 50)
this.isReserve = true
else {
if (touchObject.x < this.touchDownX) {
this.isReserve = touchObject.x > this.touchMoveX
} else {
this.isReserve = touchObject.x < this.touchMoveX
}
}
}
}
onTouchUp(touchObject: TouchObject) {
if(this.isFling) return
if (this.axis === Axis.Vertical) {
if (touchObject.y < this.touchDownY)
this.scroller.scrollToIndex(this.isReserve ? this.currentIndex : this.currentIndex + 1, true, ScrollAlign.CENTER)
else
this.scroller.scrollToIndex(this.isReserve ? this.currentIndex : this.currentIndex - 1, true, ScrollAlign.CENTER)
}
else {
if (touchObject.x < this.touchDownX)
this.scroller.scrollToIndex(this.isReserve ? this.currentIndex : this.currentIndex + 1, true, ScrollAlign.CENTER)
else
this.scroller.scrollToIndex(this.isReserve ? this.currentIndex : this.currentIndex - 1, true, ScrollAlign.CENTER)
}
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>