Waterfall 瀑布流

概述

Waterfall 瀑布流，是比较流行的一种页面布局，视觉表现为参差不齐的多栏布局。
Waterfall 提供了fui-waterfall 和 fui-waterfall-item 两个组件来进行布局（需结合使用）。

温馨提示

• 目前组件默认固定为两列，后期视情况进行优化。

• 组件默认使用屏幕宽度，请勿在组件外层使用padding设置左右间距，请使用props属性设置。

• 列表中图片src需要传入 fui-waterfall-item 组件中，其他信息自行在插槽中进行布局。

引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "瀑布流",
  "usingComponents": {
    "fui-waterfall":"/components/firstui/fui-waterfall/fui-waterfall",
    "fui-waterfall-item":"/components/firstui/fui-waterfall-item/fui-waterfall-item"
  }
}

第二种：在根目录app.json文件中全局引入

"usingComponents": {
    "fui-waterfall":"/components/firstui/fui-waterfall/fui-waterfall",
    "fui-waterfall-item":"/components/firstui/fui-waterfall-item/fui-waterfall-item"
}

代码演示

代码演示、属性列表等详细内容仅VIP用户可查看。

你真是个小机灵鬼~

该内容仅VIP用户可查看！

前往官网开通会员

示例预览

特别说明

该组件为付费组件，微信小程序版VIP用户可免费使用 。

开通会员 (opens new window)