中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
如何实现scroll、list单边回弹效果
微信扫码分享
在onDidScroll里获取currentOffset().yOffset来控制单边回弹效果,在list组件还可以通过onScrollIndex实现单边回弹效果。
参考代码:
scroll组件
@Entry @Component struct Index { @State yOffset: number = 0 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: number) => { Text(item.toString()) .width('90%') .height(150) .backgroundColor(0xFFFFFF) .borderRadius(15) .fontSize(16) .textAlign(TextAlign.Center) .margin({ top: 10 }) }, (item: string) => item) }.width('100%') } .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 .scrollBar(BarState.On) // 滚动条常驻显示 .scrollBarColor(Color.Gray) // 滚动条颜色 .scrollBarWidth(10) // 滚动条宽度 .friction(0.6) .edgeEffect(this.yOffset <= 0 ? EdgeEffect.Spring : EdgeEffect.None) // 滚动到边沿后回弹 .onDidScroll(() => { this.yOffset = this.scroller.currentOffset().yOffset; }) }.width('100%').height('100%').backgroundColor(0xDCDCDC) } }
List组件
@Entry @Component struct Index { private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] @State isTop: boolean = true build() { Column() { List({ space: 20, initialIndex: 0 }) { ForEach(this.arr, (item: number) => { ListItem() { Text('' + item) .width('100%') .height(100) .fontSize(16) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) } }, (item: string) => item) } .listDirection(Axis.Vertical) // 排列方向 .scrollBar(BarState.Off) .friction(0.6) .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 .edgeEffect(this.isTop ? EdgeEffect.None : EdgeEffect.Spring) .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => { if (firstIndex === 0) { this.isTop = true } else { this.isTop = false } }) .width('90%') } .width('100%') .height('100%') .backgroundColor(0xDCDCDC) .padding({ top: 5 }) } }
在onDidScroll里获取currentOffset().yOffset来控制单边回弹效果,在list组件还可以通过onScrollIndex实现单边回弹效果。
参考代码:
scroll组件
List组件