如何实现鸿蒙的双层滚动
·
实现鸿蒙的双层滚动采用Scroll嵌套List组件实现双层滚动效果
Scroll() {
Column() {
// 占位内容,让Scroll先滚动这个区域
Column() {
Text('')
.height('50px')
}
.width('100%')
.backgroundColor('rgba(0, 0, 0, 1)')
// List内容
List() {
ForEach(this.messageList, (item: MessageItem) => {
ListItem() {
Shape() {
Column() {
Column() {
Text(this.TipMessage)
.width('100%')
.textAlign(TextAlign.Start)
.fontWeight(500)
.fontSize('38px')
.lineHeight('44px')
.fontColor('rgba(255, 255, 255, 1)')
.margin({
bottom: '10px'
})
Text(item.content || item.abstract || '暂无详细信息')
.maxLines(2)
.textOverflow({
overflow: TextOverflow.Ellipsis
})
.fontSize('30px')
.lineHeight('35.16px')
.fontColor('rgba(255, 255, 255, 1)')
.textAlign(TextAlign.Start)
.width('100%')
}
.layoutWeight(1)
Row() {
Text(item.create_time || this.curentTime)
.fontWeight(300)
.fontSize('26px')
.fontColor('rgba(166, 166, 166, 1)')
.lineHeight('30.47px')
.width('100%')
.textAlign(TextAlign.End)
}
.height('30px')
.margin({ bottom: '15px', right: '10px' })
}
}
.margin({
left: '46px',
right: '46px',
bottom: "28px"
})
.borderRadius('50.56px')
.opacity(0.6)
.width('374px')
.height('220px')
.padding({
top: "22px",
left: "23px",
right: "12.5px"
})
.linearGradient({
angle: 149.58,
colors: this.gradientColor
})
}
.onClick(() => {
HMRouterMgr.push({
pageUrl: "NotificationDescriptionPage",
param: {
message_id: item.message_id
}
})
})
})
// 加载更多提示
if (this.hasMore) {
ListItem() {
Row() {
if (this.isLoading) {
Text('加载中...')
.fontSize('26px')
.fontColor('rgba(166, 166, 166, 1)')
} else {
Text('上拉加载更多')
.fontSize('26px')
.fontColor('rgba(166, 166, 166, 1)')
}
}
.width('100%')
.justifyContent(FlexAlign.Center)
.padding({ top: '20px', bottom: '20px' })
}
} else if (this.messageList.length > 0) {
ListItem() {
Row() {
Text('没有更多数据了')
.fontSize('26px')
.fontColor('rgba(166, 166, 166, 1)')
}
.width('100%')
.justifyContent(FlexAlign.Center)
.padding({ top: '20px', bottom: '20px' })
}
}
}
.width('100%')
.height('100%')
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.onReachEnd(() => {
// 上拉加载更多
if (this.hasMore && !this.isLoading) {
this.loadMessages(true)
}
})
}
}
.width('100%')
.height('100%')
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
.onScrollFrameBegin((offset: number, state: ScrollState) => {
// 监听Scroll的滚动状态
this.parentScrollOffset = offset
// 当Scroll滚动超过50px时,开始吸顶
if (offset >= 50) {
this.isScrolled = true
} else {
this.isScrolled = false
}
// 返回默认的滚动处理结果
return { offsetRemain: offset }
})
}
注意实现双层滚动效果,需要使用以下属性
.nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST }) 使用此方向滚动的属性,同时还要使用onScrollFrameBegin这个方法,来监听滚动高度。
更多推荐

所有评论(0)