编写一个页面,实现吸顶效果

列表吸顶场景

1.向上滑动,list也会跟着上滑

2.list标题上滑到顶部时,不会再给滚动,只有list的子项滑动

HarmonyOS
2024-05-26 15:08:48
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
makeer

使用的核心API

核心代码解释

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。包含ListItem、ListItemGroup子组件。

List({ space: 10, scroller: this.scrollerForList }) { 
  ForEach(this.arr, (item: number) => { 
    ListItem() { 
      Text("促销商品" + item) 
        .width("100%") 
        .height("100%") 
        .borderRadius(15) 
        .fontSize(24) 
        .textAlign(TextAlign.Center) 
        .backgroundColor(Color.White) 
    }.width("100%").height(100) 
  }, (item: string) => item) 
} 
.padding({ left: 10, right: 10 }) 
.width("100%") 
.edgeEffect(EdgeEffect.None) 
.scrollBar(BarState.Off) 
.onReachStart(() => { 
  this.listPosition = ScrollPosition.start 
}) 
.onReachEnd(() => { 
  this.listPosition = ScrollPosition.end 
}) 
.onScrollFrameBegin((offset: number, state: ScrollState) => { 
  // 滑动到列表中间时 
  if (!((this.listPosition == ScrollPosition.start && offset < 0) 
    || (this.listPosition == ScrollPosition.end && offset > 0))) { 
    this.listPosition = ScrollPosition.center 
  } 
 
  // 如果页面已滚动到底部,列表不在顶部或列表有正向偏移量 
  if (this.scrollPosition == ScrollPosition.end 
    && (this.listPosition != ScrollPosition.start || offset > 0)) { 
    return { offsetRemain: offset }; 
  } else { 
    this.scrollerForScroll.scrollBy(0, offset) 
    return { offsetRemain: 0 }; 
  } 
}) 
} 
.tabBar('促销活动')

适配的版本信息

DevEco Studio Version: 4.0.1.601

SDK:HarmoneyOS 4.0.0.40

分享
微博
QQ
微信
回复
2024-05-27 20:10:32
相关问题
如何实现通用的顶效果
212浏览 • 1回复 待解决
tabs结合scroll实现顶效果
465浏览 • 1回复 待解决
编写一个页面实现不规则列表
389浏览 • 1回复 待解决
如何实现Tabs组件tarbar的顶效果
244浏览 • 1回复 待解决
如何实现分组列表的顶/效果
990浏览 • 1回复 待解决
编译一个页面,实现选座场景
370浏览 • 1回复 待解决
一个页面怎么实现多个AbilitySlice?
13157浏览 • 5回复 待解决
页面和列表嵌套滚动,实现列表
533浏览 • 1回复 待解决
如何实现一个折叠组件
426浏览 • 1回复 待解决
ArkTS如何实现一个底部弹窗?
102浏览 • 1回复 待解决