【鸿蒙5.0】Scroll左右滑动

效果图

运行效果图

代码如下

import { curves } from '@kit.ArkUI'@Entry
@Component
struct ScrollExample {scroller: Scroller = new Scroller()private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]build() {Stack({ alignContent: Alignment.TopStart }) {Column(){Scroll(this.scroller) {Row() {ForEach(this.arr, (item: number) => {Text(item.toString()).fontColor(Color.Orange).width(150).height('90%').backgroundColor(0xFFFFFF).borderRadius(15).fontSize(16).textAlign(TextAlign.Center).margin({ left: 10 })}, (item: string) => item)}.height('50%')}.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.On).scrollBarColor(Color.Gray).scrollBarWidth(10).friction(0.6).edgeEffect(EdgeEffect.None).onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {console.info(xOffset + ' ' + yOffset)}).onScrollEdge((side: Edge) => {console.info('To the edge')}).onScrollStop(() => {console.info('Scroll Stop')})Column({ space: 15 }) {Button('scroll 150 右滑指定距离150vp').onClick(() => {this.scroller.scrollBy(150, 0)})Button('scroll 100').onClick(() => {const xOffset: number = this.scroller.currentOffset().xOffset;this.scroller.scrollTo({ xOffset: xOffset + 100, yOffset: 0 })})Button('scroll 100 with animation').onClick(() => {let curve = curves.interpolatingSpring(10, 1, 228, 30)const xOffset: number = this.scroller.currentOffset().xOffset;this.scroller.scrollTo({xOffset: xOffset + 100,yOffset: 0,animation: { duration: 1000, curve: curve }})})Button('back to start').onClick(() => {this.scroller.scrollEdge(Edge.Start)})Button('next page').onClick(() => {this.scroller.scrollPage({ next: true, animation: true })})Button('fling -3000').onClick(() => {this.scroller.fling(-3000)})Button('scroll to end').onClick(() => {this.scroller.scrollEdge(Edge.End, { velocity: 700 })})}}.width('100%').height('100%').backgroundColor(0xDCDCDC)}.width('100%').height('100%').backgroundColor(0xDCDCDC)}
}