为了方便小程序开发者高效、快捷地优化小程序页面布局,优化用户体验,小程序开发团队在scroll-view 组件的自定义模式下,新增了3 个布局组件,下面为大家介绍。
scroll-view 组件的新增布局组件
1、列表布局容器list-view
相比以往计算网格大小、拼接瀑布流等复杂方法,直接使用 grid-view 组件也能高效实现瀑布流效果:
1)将 scroll-view 切换到 custom 模式
2)采用 grid-view 类型为 masonry 作为直接子节点
3)在 grid-view 中直接编写列表
2、吸顶布局容器sticky-section / sticky-header
使用 sticky 布局仅需 4 步即可快速实现交错吸顶的功能:
1)将 scroll-view 切换到 custom 模式
2)采用 sticky-section 作为 scroll-view 的子元素
3)sticky-header 放置吸顶内容
4)list-view 放置列表内容
3、网格布局容器grid-view
相比过往自行切割网格的方式,应用 grid-view 组件只需 3 步即可实现网格布局:
1)将 scroll-view 切换到 custom 模式
2)采用 grid-view 类型为 aligned 作为直接子节点
3)在 grid-view 中直接编写列表