往期知识点整理
- 鸿蒙(HarmonyOS)北向开发知识点记录~
- 主题设置(应用深浅色适配)
- 主题设置(设置主题换肤)
- UI开发(ArkTS声明式开发)
- UI布局各种方式简述
- 线性布局 (Row/Column)
- 层叠布局 (Stack)
- 弹性布局 (Flex)
- 相对布局 (RelativeContainer)
- 栅格布局 (GridRow/GridCol)
- 持续更新中……
场景描述
在多列表页面开发中,数据展示往往有联动关系,
场景一:单列表布局多长列表页面,如门户首页、商城首页
场景二:双列表滚动联动,如城市选择
场景三:多列表滚动横向纵向联动,如汽车参数对比,股票信息列表
方案描述
场景一:
单列表布局多长列表页面,如门户首页、商城首页效果图
方案
运用List组件作为整个首页长列表的容器,通过ListItem对不同模块进行定制。
- Refresh包裹List实现下拉刷新
- ListItem-0嵌套Swiper实现轮播图。
- ListItem-1嵌套Grid实现快捷入口。
- ListItem-2嵌套Column实现秒杀
- ListItemGroup实现商品分类列表
- 最底部ListItem实现触底自动加载
核心代码
build() {
Column() {
// 搜索框 置顶
if (this.searchSticky) {
this.searchBarBuilder()
}
// 下拉刷新组件
Refresh({ refreshing: $$this.isRefreshing }) {
// List组件作为长列表布局
List({ space: 10 }) {
// 搜索框跟随
if (!this.searchSticky) {
ListItem() {