HarmonyOS应用开发-ETSsrcoll滑动组件

1、蛟龙腾飞学习分享材料 HarmonyOS应用开发-ETSsrcoll滑动组件说明：该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。可滚动的容器组件，当子组件的布局尺寸超过父组件的视口时，内容可以滚动。接口Scroll(scroller?: Scroller)属性名称参数类型默认值描述scrollable HYPERLINK /cn/docs/documentation/doc-references/ts-container-scroll-0000001163543527 l ZH-CN_TOPIC_0000001163543527_li1

2、464044171913 ScrollDirectionVertical设置滚动方法。scrollBar HYPERLINK /cn/docs/documentation/doc-references/ts-appendix-enums-0000001111421446 l section122549529179 BarStateAuto设置滚动条状态。scrollBarColorColor-设置滚动条的颜色。scrollBarWidthLength-设置滚动条的宽度。Scroller可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动，目前支持绑定到List和Sc

3、roll组件上。导入对象scroller: Scroller = new Scroller()scroller.scrollToscrollTo(value: xOffset: number | string, yOffset: number | string, animation?: duration: number, curve: Curve ): void滑动到指定位置。scroller.scrollEdgescrollEdge(value: Edge): void滚动到容器边缘。scroller.scrollPagescrollPage(value: next: boolean): v

4、oid滚动到下一页或者上一页。scroller.currentOffsetscroller.currentOffset(): Object返回当前的滚动偏移量。scroller.scrollToIndexscroller.scrollToIndex(value: number): void滑动到指定Index。事件名称功能描述onScroll(xOffset: number, yOffset: number) = void滚动事件回调, 返回滚动时水平、竖直方向偏移量。onScrollEdge(side: Edge) = void滚动到边缘事件回调。onScrollEnd() = void滚动

5、停止时事件回调。示例：EntryComponentstruct ScrollExample scroller: Scroller = new Scroller() private arr: number = 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 build() Stack( alignContent: Alignment.TopStart ) Scroll(this.scroller) Column() ForEach(this.arr, (item) = Text(item.toString() .width(90%).height(150).backgroundColo

6、r(0 xFFFFFF) .borderRadius(15).fontSize(16).textAlign(TextAlign.Center) .margin( top: 10 ) , item = item) .width(100%) .scrollable(ScrollDirection.Vertical).scrollBar(BarState.On) .scrollBarColor(Color.Gray).scrollBarWidth(30) .onScroll(xOffset: number, yOffset: number) = (xOffset + + yOffset) ) .on

7、ScrollEdge(side: Edge) = (To the edge) ) .onScrollEnd() = (Scroll Stop) ) Button(滑动) .onClick() = / 点击后下滑100.0距离 this.scroller.scrollTo( xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 ) ) .margin( top: 10, left: 20 ) Button(返回顶部) .onClick() = / 点击后回到顶部 this.scroller.scrollEdge(Edge.Top) ) .margin( top: 60, left: 20 ) Button(下一页) .onClick() = / 点击后下滑到底部 this.scroller.