2023年，整点新活儿！
微
微信团队约 2 分钟
微信团队约 2 分钟以上全新玩法更方便、更简单、更省事
尽在 新版 scroll-view 组件！
新版 scroll-view 组件 在自定义模式下，新增 3 个布局组件，便于开发者高效、快捷地优化小程序页面布局，优化用户体验：
列表布局容器 list-view
吸顶布局容器 sticky-section / sticky-header
网格布局容器 grid-view
吸顶布局代码示例
使用 sticky 布局仅需 4 步即可快速实现交错吸顶的功能：
将 scroll-view 切换到 custom 模式
采用 sticky-section 作为 scroll-view 的子元素
sticky-header 放置吸顶内容
list-view 放置列表内容
<scroll-view type="custom"><sticky-section wx:for="{{list}}"><sticky-header><view>{{item.name}}</view></sticky-header><list-view><view>...</view></list-view></sticky-section></scroll-view>
网格布局代码示例
相比过往自行切割网格的方式，应用 grid-view 组件只需 3 步即可实现网格布局：
将 scroll-view 切换到 custom 模式
采用 grid-view 类型为 aligned 作为直接子节点
在 grid-view 中直接编写列表
<scroll-view type="custom"><grid-view type="aligned" cross-axis-count="3"><view wx:for="{{list}}"><image src="{{item.image_url}}" mode="aspectFit"></image><view>...</view></view></grid-view></scroll-view>
瀑布流布局代码示例
相比以往计算网格大小、拼接瀑布流等复杂方法，直接使用 grid-view 组件也能高效实现瀑布流效果：
将 scroll-view 切换到 custom 模式
采用 grid-view 类型为 masonry 作为直接子节点
在 grid-view 中直接编写列表
<scroll-view type="custom"><grid-view type="masonry" cross-axis-count="2"><view wx:for="{{list}}"><image src="{{item.image_url}}" mode="widthFix"></image><view>...</view></view></grid-view></scroll-view>
新版 scroll-view 组件如此强大，现在使用微信开发者工具导入 代码片段（注意：请使用 PC 端浏览器打开），即可快速体验布局能力！
2023 年 2 月 8 日停止收集问卷后，微信团队将从有效问卷中随机抽取 5 位参与者，各送出微信官方周边礼物 1 份，快来分享你的开发体验吧！
* 获奖名单将于「微信开发者」公众号进行公示