《HarmonyOS应用开发基础》 课件知识点2-12-1 滚动容器组件Scroll.pptx

滚动容器组件Scroll

Scroll概述Scroll是可滚动的容器组件，它最多包含一个子组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。如右图所示。接口描述：Scroll(scroller?:Scroller)

Scroll的属性Scroll除支持通用属性外，还支持以下属性：名称参数类型描述scrollableScrollDirection设置滚动方向。默认值：ScrollDirection.VerticalscrollBarBarState设置滚动条状态。默认值：BarState.AutoscrollBarColorstring|number|?Color设置滚动条的颜色。scrollBarWidthstring|number设置滚动条的宽度。edgeEffectEdgeEffect设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。默认值：EdgeEffect.NoneScrollDirection.Vertical：垂直方向滚动ScrollDirection.Horizontal：水平方向滚动ScrollDirection.None：不可滚动

Scroll属性使用示例private?arr:?number[]?=?[0,?1,?2,?3,?4,?5,?6,?7,?8,?9]...省略代码Scroll()?{??Column()?{????ForEach(this.arr,?(item)?=?{??????Text(item.toString())?????????...省略Text属性????},?item?=?item)??}.width(100%)}.scrollable(ScrollDirection.Vertical)??//?滚动方向纵向.scrollBar(BarState.On)??//?滚动条常驻显示.scrollBarColor(Color.Gray)??//?滚动条颜色.scrollBarWidth(30)?//?滚动条宽度.edgeEffect(EdgeEffect.None)

Scroll的事件Scroll除支持通用事件外，还支持如下事件。名称功能描述onScroll(event:(xOffset:number,yOffset:number)=void)滚动事件回调,返回滚动时水平、竖直方向偏移量。onScrollEdge(event:(side:Edge)=void)滚动到边缘事件回调。onScrollEnd(event:()=void)滚动停止事件回调。

Scroll事件使用示例Scroll()?{???...省略Scroll子组件}...省略Scroll属性.onScroll((xOffset:?number,?yOffset:?number)?=?{??console.info(xOffset?+???+?yOffset)}).onScrollEdge((side:?Edge)?=?{??console.info(To?the?edge)}).onScrollEnd(()?=?{??console.info(Scroll?Stop)})

Scroll控制器使用示例scroller:?Scroller?=?new?Scroller()Scroll(this.scroller)?{???...省略Scroll子组件}...省略Scroll属性Button(scroll?150)??.onClick(()?=?{?//?点击后下滑指定距离150.0vp????this.scroller.scrollBy(0,150)??})Button(scroll?100)??.onClick(()?=?{?//?点击后滑动到指定位置，即下滑100.0vp的距离????this.scroller.scrollTo({?xOffset:?0,?yOffset:?this.scroller.currentOffset().yOffset?+?100?})??})Button(back?top)??.onClick(()?=?{?//?点击后回到顶部????this.scroller.scrollEdge(Edge.Top)??})Button(next?page)??.onClick(()?=?{?//?点击后滑到下一页????this.scroller.scrollPage({?next:?true?})??})