Use the parallelGesture method.
@Entry
@Component
struct ScrollAndGesture {
scroller: Scroller = new Scroller();
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
private panGestureOptions: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Up | PanDirection.Down });
build() {
Stack({ alignContent: Alignment.TopStart }) {
Scroll(this.scroller) {
Column() {
ForEach(this.arr, (item: number) => {
Text(item.toString())
.width('90%')
.height(150)
.backgroundColor(0xFFFFFF)
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
.margin({ top: 10 })
}, (item: string) => item)
}.width('100%')
}
.scrollable(ScrollDirection.Vertical) // Rolling direction vertically
.scrollBar(BarState.On) // Scroll bar permanent display
.scrollBarColor(Color.Gray) // Scroll bar color
.scrollBarWidth(10) // Scroll bar width
.friction(0.6)
.edgeEffect(EdgeEffect.None)
.onWillScroll((xOffset: number, yOffset: number) => {
console.info(xOffset + ' ' + yOffset);
})
.onScrollEdge((side: Edge) => {
console.info('To the edge');
})
.onScrollStop(() => {
console.info('Scroll Stop');
})
}
.parallelGesture(
PanGesture(this.panGestureOptions)
.onActionStart((event?: GestureEvent) => {
console.info('start',event);
})
.onActionUpdate((event?: GestureEvent) => {
if (event) {
console.info('event',event);
}
})
.onActionEnd(() => {
console.info('end');
})
)
.width('100%')
.height('100%')
.backgroundColor(0xDCDCDC)
}
}