《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識點2-12-1 滾動容器組件Scroll

滾動容器組件ScrollScroll概述Scroll是可滾動的容器組件，它最多包含一個子組件，當子組件的布局尺寸超過父組件的尺寸時，內(nèi)容可以滾動。如右圖所示。接口描述：Scroll(scroller?:Scroller)Scroll的屬性Scroll除支持通用屬性外，還支持以下屬性：名稱參數(shù)類型描述scrollableScrollDirection設(shè)置滾動方向。默認值：ScrollDirection.VerticalscrollBarBarState設(shè)置滾動條狀態(tài)。默認值：BarState.AutoscrollBarColorstring|number|

Color設(shè)置滾動條的顏色。scrollBarWidthstring|number設(shè)置滾動條的寬度。edgeEffectEdgeEffect設(shè)置滑動效果，目前支持的滑動效果參見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)滾動事件回調(diào),返回滾動時水平、豎直方向偏移量。onScrollEdge(event:(side:Edge)=>void)滾動到邊緣事件回調(diào)。onScrollEnd(event:()=>void)滾動停止事件回調(diào)。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)

})Butt