评论

Skyline|小程序吸顶、网格、瀑布流布局都拿下~

来看看新版 scroll-view 带来的新能力吧~

在之前的文章中,我们知道了新 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 组件能力~

最后一次编辑于  2023-08-03  
点赞 15
收藏
评论

10 个评论

  • 名仕
    名仕
    2023-08-31

    这是自己的官网都有bug?

    2023-08-31
    赞同 3
    回复 3
    • 小牛
      小牛
      2024-01-23
      2024-01-23
      回复
    • 小牛
      小牛
      2024-01-23回复小牛
      还存在哦
      2024-01-23
      回复
    • QQ
      QQ
      2024-04-02回复小牛
      现在还有哦
      2024-04-02
      回复
  • 恭喜發財
    恭喜發財
    2024-02-05

    给你写好了,快改改

    2024-02-05
    赞同 2
    回复
  • CDD🌟
    CDD🌟
    2023-08-06

    为什么我导入后页面显示了但是滑动不了

    2023-08-06
    赞同 2
    回复 2
    • Carson
      Carson
      2024-02-23
      我也滑动不了 有谁知道吗?
      2024-02-23
      回复
    • 無用先生
      無用先生
      05-14
      没有人知道,我每次写一个新的小程序项目都考虑过用他这个渲染引擎,然后每次都是遇到各种乱七八糟的,无法解决的,他们自己都解决不了的问题而放弃,任重道远啊
      05-14
      回复
  • 刘东
    刘东
    2023-01-18

    导入代码片段后无任何效果,搞不清演示的东西是啥整出来的

    2023-01-18
    赞同 2
    回复 2
  • 三野
    三野
    08-12

    解决了哈,评论区的朋友们,你们的建议很好,但是....


    然后整合一下运行需要用到的步骤:

    1.在app.json中添加

    "renderer": "skyline",(复制下面)

      "componentFramework": "glass-easel",

      "rendererOptions": {

        "skyline": {

          "defaultDisplayBlock": true,

          "defaultContentBox": true,

          "tagNameStyleIsolation": "legacy",

          "enableScrollViewAutoSize": true,

          "keyframeStyleIsolation": "legacy"

        }

      }

    2.详情-本地设置-开启skyline渲染模式

    3.在index/index 里面的 scroll-view 添加 scroll-y


    真的是服了,

    08-12
    赞同 1
    回复
  • 佳佳果
    佳佳果
    2023-06-18

    瀑布流边距怎么单独设置,而不是给scroll-view设置边距


    2023-06-18
    赞同 1
    回复 3
  • 🏃🏻
    🏃🏻
    2023-05-23

    现在瀑布流支持按权重值展示吗?

    2023-05-23
    赞同 1
    回复 1
    • 黄思程
      黄思程
      2023-08-04
      具体描述一下?
      2023-08-04
      回复
  • brave
    brave
    2023-01-14

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的新年快乐。

    待楼主反馈
    2023-01-14
    赞同 1
    回复
  • 哈罗哈皮
    哈罗哈皮
    2022-12-26

    大佬厉害,马上点赞+收藏=学会了

    2022-12-26
    赞同 1
    回复 1
  • 风无心
    风无心
    04-28

    厉害厉害,借用了

    04-28
    赞同
    回复
登录 后发表内容