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

写在前面

横向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%') // 用百分比是比较好的,不担心上面的距离,肯定能撑起来最后一个表结构内容
相关推荐
wycode5 分钟前
Promise(一)极简版demo
前端·javascript
浮幻云月6 分钟前
一个自开自用的Ai提效VsCode插件
前端·javascript
DevSecOps选型指南8 分钟前
SBOM风险预警 | NPM前端框架 javaxscript 遭受投毒窃取浏览器cookie
前端·人工智能·前端框架·npm·软件供应链安全厂商·软件供应链安全工具
__lll_16 分钟前
Docker 从入门到实战:容器、镜像与 Compose 全攻略
前端·docker
木春29 分钟前
react组件化思维:高复用性 UI 设计之道
前端·react.js
切克呦38 分钟前
通过 Cursor CLI 使用 GPT-5 的教程
前端·后端·程序员
gitboyzcf39 分钟前
Git 常用命令
前端·git·后端
Juchecar39 分钟前
Vue3 多个router-view命名视图示例(注意components复数)
前端
代码改变世界1008639 分钟前
像素风球球大作战 HTML 游戏
前端·游戏·html