鸿蒙NEXT开发浅进阶到精通04:类似支付宝横向导航栏与list组件联动随航

彭不懂赶紧问2025-04-30 10:23

写在前面

横向Scroll与list联动,达到横向导航栏效果，在APP交互中比较常见，那么在鸿蒙中如何巧妙实现呢？

1-双控制器建立,并做好区分: Scroll容器的是Scroller( ) list的是ListScroller( ), 绑定控制器

2-状态变量-两个容器子组件下标

3-建立数组,,scroll(横向导航栏标题) 与 List中ListItemGroup中的hearer对应,最好一致

4-明白控制需求

4.1-点击scroll导航栏中字条,跳转到list中对应位置

4.2-滑动List时滑到某个ListGroup时,scroll导航栏跳转选中对应字条

5-施加控制

4.1解析,(这里属于scorll对list的联动,, 由于下标相同,,,,在字条下点击获取字条下标,,点击事件下用lIst控制器 LS.scrollToIndex(index))

这里留意当scrollSelectIndex 控制着字条选中高亮,,下面的控制也很关键

4.2解析,

当listGroup变化时,导航栏的字条也变换,还是利用下标

在List下做onscrollToIndex()事件,,将内容区的第一个ListItemGroup下标传给导航栏的选中下标即可

小细节

1-如上,在List控制scroll的转换时,会发现scroll横向不能随着字条选中滚动,导致选中后面的字条,还没转到视觉范围内容, 利用手机宽度内最大展示字条数(如本案例截图的 3 由此而来)作为判断条件,当到达后控制scroll的实际滚动 sc.scrollBy( 100,0) 第一是x轴,第二个是y轴,,,这里的100是取自每个字条的宽度,不是乱取的哦,,

2- scroll组件的横向是属性 .scrollable(ScrollDirection.Horizontal)

3-表尾---后面最后一个group滑不上来时,内容展示出来了,但最后一个Group头不能到达最上面,导致获取不到最后的下标,,scorll中最后一个字条不能被选中,,,此时多加一个表尾结构,撑场面

scss 复制代码

//表尾---后面最后一个group滑不上来时,撑场面,也可表达产品主题或广告等主题词填充不突兀
ListItem() {
  Column() {
    Image($r('app.media.0601'))
      .width('100%')
  }.width('100%')
  .height('100%')
  .justifyContent(FlexAlign.Start)
}
.height('50%') // 用百分比是比较好的,不担心上面的距离,肯定能撑起来最后一个表结构内容