场景一:实现左滑阻尼效果
效果图
方案
在List组件上绑定滑动手势,在List里面最后一个ListItem内部放入Ellipse和Text组件,在滑动手势onActionUpdate回调里控制ListItemGroup组件的offset属性left参数和Ellipse的宽度达到左滑阻尼的效果。
核心代码
List({ initialIndex: 0, scroller: this.scroller }) {
ListItemGroup({ space: 20 }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text('' + item)
.width(80)
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
}, (item: string) => item)
}
.offset({ left: this.offsetLeft })
ListItem() {
this.itemEnd()
}
}
.width('100%')
.height(120)
.scrollBar(BarState.Off)
.listDirection(Axis.Horizontal)
.edgeEffect(EdgeEffect.None)
.backgroundColor(0xDCDCDC)
.padding(10)
.onReachEnd(() => {
this.isEnd = true
console.log('is end')
})
.onScrollFrameBegin((offset: number) => {
console.log('offset', offset)
if (!this.scroller.isAtEnd()) {
this.isEnd = false
}
if (this.ellipseWidth > 0) {
return { offsetRemain: 0 }
}
return { offsetRemain: offset }
})
.parallelGesture(
PanGesture({ direction: PanDirection.Horizontal, distance: 1 })
.onActionStart(() => {
this.slidOffsetX = 0
})
.onActionUpdate((event: GestureEvent) => {
if (event && this.isEnd) {
// 限制offsetLeft大于-60小于0
if (event.offsetX - this.slidOffsetX < -60) {
this.offsetLeft = -60
} else if (event.offsetX - this.slidOffsetX > 0) {
this.offsetLeft = 0
} else {
this.offsetLeft = event.offsetX - this.slidOffsetX
}
this.ellipseWidth = (-this.offsetLeft) / 1.5
} else {
// 已滑动的偏移量x保存下来,用于处理还未至底部就开始滑动的情况
this.slidOffsetX = event.offsetX
}
})
.onActionEnd((event: GestureEvent) => {
console.info('Pan end')
this.offsetLeft = 0
this.ellipseWidth = 0
if (event.offsetX < 0) {
console.log('跳转')
}
})
)
场景二:左滑删除,类似点击弹出swipeAction的效果
效果图
方案
在ListItem组件上绑定滑动手势,在滑动手势onActionUpdate事件里控制ListItem的属性offset的参数x的值,在onActionEnd事件里判断当前左滑的偏移量控制是否拉出删除按钮,最后给ListItem绑定点击事件,使用animateTo展开删除按钮。
核心代码
ListItem() {
Row() {
Text('item' + this.item.num)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
Row() {
Button('删除')
}
.width(120)
.justifyContent(FlexAlign.Center)
}
}
.offset({ x: this.item.offsetX })
.transition({ type: TransitionType.Delete, opacity: 0 })
.priorityGesture(
PanGesture({ direction: PanDirection.Horizontal, distance: 1 })
.onActionUpdate((event: GestureEvent) => {
if (this.item.isDelShow) {
// 删除按钮显示状态
if (-120 + event.offsetX < -120) {
this.item.offsetX = -120
} else if (-120 + event.offsetX > 0) {
this.item.offsetX = 0
} else {
this.item.offsetX = -120 + event.offsetX
}
} else {
// 删除按钮未显示状态
if (event.offsetX < -120) {
this.item.offsetX = -120
} else if (event.offsetX > 0) {
this.item.offsetX = 0
} else {
this.item.offsetX = event.offsetX
}
}
})
.onActionEnd((_event: GestureEvent) => {
console.log('this.item.offsetX', this.item.offsetX)
if (this.item.offsetX > -60) {
animateTo({
duration: 300,
}, () => {
this.item.offsetX = 0
this.item.isDelShow = false
})
} else {
animateTo({
duration: 300,
}, () => {
this.item.offsetX = -120
this.item.isDelShow = true
})
}
})
)
.onClick(() => {
animateTo({
duration: 300,
}, () => {
this.item.offsetX = -120
this.item.isDelShow = true
})
})