更新时间:2021-12-22 16:07:39浏览次数:679+次
在鸿蒙ArkUI(eTS)开发中,如何实现列表回到顶部的效果?
解答
让list组件绑定Scroller事件,调用scroller.scrollToIndex(0)方法。代码如下:
@Entry
@Component
struct Index {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
scroller: Scroller = new Scroller()
build() {
Stack({ alignContent: Alignment.TopStart }) {
List({ scroller: this.scroller }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
}, item => item)
}
.divider({strokeWidth:1,color:0xcccccc})
.edgeEffect(EdgeEffect.None) // 滑动到边缘无效果
.width('100%')
Button('回到顶部')
.onClick(() => {
this.scroller.scrollToIndex(0)
}).markAnchor({ x: '100%', y: '100%'})
.position({ x: '100%', y: '100%' }).margin(10)
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
}
相关参考:在鸿蒙HarmonyOS开发下如何去除顶部Bar。
相关资讯