在之前的文章中，我们知道了新 scroll-view 可以让小程序的长列表做到丝滑滚动～

也提到了新 scroll-view 提供了很多新能力 sticky、网格布局、瀑布流布局等，这一篇，我们就来看看这些新能力是怎么使用的～

新 scroll-view 在原来列表模式（type="list"）的基础上，新增了自定义模式（type="custom"）

在自定义模式下，新增了以下新组件供开发者调用

• list-view：列表布局容器
• sticky-section / sticky-header：吸顶布局容器
• grid-view：网格布局容器，可实现网格布局、瀑布流布局等

sticky布局

sticky 布局即在应用中常见的吸顶布局，与 CSS 中的 position: sticky 实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

常见的使用场景有：通讯录、账单列表、菜单列表等等。

与 position: sticky 不同的是，position: sticky 很难实现列表滚动需要的交错吸顶效果，而 sticky 组件则可以帮忙开发者轻松实现交错吸顶的效果。

sticky 的使用非常简单：

• 将 scroll-view 切换到 custom 模式
• 采用 sticky-section 作为 scroll-view 的子元素
• sticky-header 放置吸顶内容
• list-view 放置列表内容

  
    
      {{item.name}}
    
    
      ...
    
  

我们来看下采用 sticky 布局做出来的通讯录效果～

sticky 布局也可以通过给 sticky-section 配置 push-pinned-header 来声明吸顶元素重叠时是否继续上推

像下图输入框和标签列表这种类型，标签列表吸顶时还是希望保留输入框吸顶。

网格布局

网格布局即将列表切割成格子，每一行的高度固定，常见的视频列表、照片列表等通常都采用网格布局。

在此之前，实现网格布局需要开发者自行实现网格切割，再嵌入到 scroll-view 中。

新 scroll-view 直接提供了 grid-view 组件供开发者使用～

• 将 scroll-view 切换到 custom 模式
• 采用 grid-view 类型为 aligned 做为直接子节点
• grid-view 中直接编写列表

  
    
      
      ...
    
  

下面是使用网格布局实现的图片列表效果～

瀑布流布局

瀑布流布局与网格布局类似，不同的是瀑布流布局中每个格子的高度都可以是不一致的，所以在小程序中实现瀑布流布局就比较复杂了。

开发者需要通过计算格子高度，然后再进行瀑布流拼接，当滚动内容过多时还需要处理节点过多导致内存不足等问题。

grid-view 组件直接支持了瀑布流模式供开发者直接使用，grid-view 组件会根据子元素高度自动布局：

• 将 scroll-view 切换到 custom 模式
• 采用 grid-view 类型为 masonry 做为直接子节点
• grid-view 中直接编写列表

  
    
      
      ...
    
  

下面是使用瀑布流布局实现的图片列表效果～

想要立即体验？现在通过微信开发者工具导入 代码片段，即可体验新版 scroll-view 组件能力～