场景描述
在多列表页面开发中,数据展示往往有联动关系,
场景一:单列表布局多长列表页面,如门户首页、商城首页
场景二:双列表滚动联动,如城市选择
场景三:多列表滚动横向纵向联动,如汽车参数对比,股票信息列表
方案描述
场景一:
单列表布局多长列表页面,如门户首页、商城首页效果图
方案
运用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 }) {