第三章
Scroll组件（Scroll组件中只有子组件的布局尺寸超过Scroll组件的尺寸时才能发生滚动，Scroll只能有一个子组件）
3.1Scroll常用属性
.scrollable()（控制Scroll组件的滚动方向）
.scrollBar()（设置滚动条的状态）
.scrollBarColor()（设置滚动条的颜色）
.scrollBarWidth()（设置滚动条的宽度）
.edgeEffect()（设置滚动边缘）
@Entry
@Component
struct Practice {
build() {
Column() {
Scroll() {
Column() {
Image($r('app.media.ic_jd_scroll_01'))
Image($r('app.media.ic_jd_scroll_02'))
Image($r('app.media.ic_jd_scroll_03'))
}
}
.scrollBar(BarState.On)
.scrollBarWidth(5)
.scrollBarColor(Color.Black)
.edgeEffect(EdgeEffect.Fade)
}
.height('100%')
.width('100%')
}
}
3.2Scroll的控制器
控制器的方法：
scrollEdge()（使页面滚动到边缘） currentOffset()（获取当前页面x，y的偏移量）
@Entry
@Component
struct Practice {
scroller = new Scroller()
build() {
Column() {
Scroll(this.scroller) {
Column() {
Image($r('app.media.ic_jd_scroll_01'))
Image($r('app.media.ic_jd_scroll_02'))
Image($r('app.media.ic_jd_scroll_03'))
}
}
.scrollBar(BarState.On)
.scrollBarWidth(5)
.scrollBarColor(Color.Black)
.edgeEffect(EdgeEffect.Fade)
.onClick(() => {
let x = this.scroller.currentOffset().xOffset
let y = this.scroller.currentOffset().yOffset
AlertDialog.show({ message: `x:${x},y:${y}` })
})
}
.height('100%')
.width('100%')
}
}
3.3onScroll()/onWillScroll()（onScroll()Api小于12的时候，从Api12开始使用onWillScroll()，滚动回调返回滚动后的偏移量，可以以此设置一个回到顶部的判断。）
@Entry
@Component
struct Page {
@State isActive: boolean = false
scroller = new Scroller()
build() {
Column() {
Stack({ alignContent: Alignment.BottomEnd }) {
Scroll(this.scroller) {
Column() {
Image($r('app.media.ic_jd_scroll_01'))
Image($r('app.media.ic_jd_scroll_02'))
Image($r('app.media.ic_jd_scroll_03'))
}
}
.onWillScroll(() => {
if (this.scroller.currentOffset().yOffset >= 400) {
this.isActive = true
} else {
this.isActive = false
}
})
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.Fade)
.height('100%')
.width('100%')
if (this.isActive) {
Row({ space: 10 }) {
Image($r('app.media.ic_jd_rocket'))
.height(30)
.width(30)
.onClick(() => {
this.scroller.scrollEdge(Edge.Top)
})
}
.padding(5)
.width(40)
.height(40)
.borderRadius(20)
.backgroundColor(Color.White)
.margin({ bottom: 90, right: 30 })
}
}
.layoutWeight(1)
Image($r('app.media.ic_jd_tab'))
.width('100%')
}
.height('100%')
.width('100%')
}
}
