HarmonyOS 鸿蒙Next 实现可以上下左右滑动效果

@Entry @Component struct ScrollExample { private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right }) @Provide offsetX: number | undefined = undefined; @Builder topArea() { tableRow().margin({right: 100}) } build() { Column { // 顶部 this.topArea() // 主体 MainArea().margin({bottom:100}) } .backgroundColor(Color.Orange) .gesture( // 用于触发拖动手势事件，滑动的最小距离为5vp时拖动手势识别成功。 PanGesture(this.panOption).onActionStart((event?: GestureEvent) => { this.offsetX = event?.offsetX console.info(‘gesture11: PanGesture start’ + event?.offsetX) }) ) } }

@Component struct MainArea { private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] build() { List { ForEach(this.arr, (item: number) => { ListItem { tableRow() }.margin({right: 100}) }, (item: number) => item.toString()) }.sticky(StickyStyle.Header) } }

// table row @Component struct tableRow { build() { Row { Text(‘111111’).fontSize(20).width(100).height(100) ScrollComponent() }.width(‘100%’) } }

@Component struct ScrollComponent { scroller: Scroller = new Scroller() @Consume @Watch(‘onCountUpdated’) offsetX: number; //监听滑动距离 onCountUpdated() { if (this.offsetX) { this.scroller.scrollTo({ xOffset: this.scroller.currentOffset()?.xOffset - this.offsetX * 50, //滑动距离可根据实际情况设置 yOffset: 0, animation: { duration: 1000 } }) } } build() { Scroll(this.scroller) { Row { Text(‘111111’).fontSize(20).width(100).height(100) Text(‘111113’).fontSize(20).width(100).height(100) Text(‘111114’).fontSize(20).width(100).height(100) Text(‘111115’).fontSize(20).width(100).height(100) Text(‘111116’).fontSize(20).width(100).height(100) Text(‘111117’).fontSize(20).width(100).height(100) Text(‘111118’).fontSize(20).width(100).height(100) Text(‘111119’).fontSize(20).width(100).height(100) Text(‘1111110’).fontSize(20).width(100).height(100) Text(‘1111111’).fontSize(20).width(100).height(100) } } .scrollable(ScrollDirection.Horizontal) // 滚动方向横向 .scrollBar(BarState.Off) // 滚动条常驻显示 .edgeEffect(EdgeEffect.None) // 禁止scroll滚动 .enabled(false) } }