微信小程序scroll-view组件新增3 个布局组件

为了方便小程序开发者高效、快捷地优化小程序页面布局,优化用户体验,小程序开发团队在scroll-view 组件的自定义模式下,新增了3 个布局组件,下面为大家介绍。

scroll-view 组件的新增布局组件

1、列表布局容器list-view

相比以往计算网格大小、拼接瀑布流等复杂方法,直接使用 grid-view 组件也能高效实现瀑布流效果:

1)将 scroll-view 切换到 custom 模式

2)采用 grid-view 类型为 masonry 作为直接子节点

3)在 grid-view 中直接编写列表

小程序scroll-view组件

2、吸顶布局容器sticky-section / sticky-header

使用 sticky 布局仅需 4 步即可快速实现交错吸顶的功能:

1)将 scroll-view 切换到 custom 模式

2)采用 sticky-section 作为 scroll-view 的子元素

3)sticky-header 放置吸顶内容

4)list-view 放置列表内容

小程序scroll-view组件

3、网格布局容器grid-view

相比过往自行切割网格的方式,应用 grid-view 组件只需 3 步即可实现网格布局:

1)将 scroll-view 切换到 custom 模式

2)采用 grid-view 类型为 aligned 作为直接子节点

3)在 grid-view 中直接编写列表

小程序scroll-view组件


声明:本站部分文章来源于互联网,如有侵犯作者著作权,请及时与我们联系。

木鱼小铺小程序

为您推荐