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

网友投稿 584 2023-10-27 10:25:57

为了方便小程序开发者高效、快捷地优化小程序页面布局,优化用户体验,小程序开发团队在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 中直接编写列表

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:查询同一主体名下所绑定的微信小程序账号教程
下一篇:微信小程序广告模式有哪些?
相关文章