# waterfall 瀑布流

<waterfall> 组件是提供瀑布流布局的核心组件。瀑布流,又称瀑布流式布局是比较流行的一种页面布局,视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动,这种布局还可以不断加载数据块并附加至当前尾部。

温馨提示

在nvue中,使用普通view做瀑布流,无法实现重用和不可见渲染资源释放。使用组件,指定cell后,原生引擎会自动优化性能。

# 示例

<template>
	<waterfall column-count="2" column-width="auto">
		<cell v-for="num in lists" :key="num">
			<text>{{num}}</text>
		</cell>
	</waterfall>
</template>
<script>
	export default {
		data() {
			return {
				lists: ['A', 'B', 'C', 'D', 'E']
			}
		}
	}
</script>

<style lang="scss">

</style>

# 子组件

<waterfall> 的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。

  • <cell> 用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。Weex 会对 <cell> 进行高效的内存回收以达到更好的性能。
  • <header><header> 到达屏幕顶部时,吸附在屏幕顶部。
  • <refresh> 用于给列表添加下拉刷新的功能。
  • <loading> 用法与特性和 <refresh> 类似,用于给列表添加上拉加载更多的功能。 描述

# API

# Attribute 属性

属性 说明 类型 可选值 默认值
show-scrollbar 控制是否出现滚动条 boolean true/false true
column-count 描述瀑布流的列数 string auto:意味着列数是被其他属性所决定的(比如 column-width)

<integer>:最佳列数,column-width 和 column-count 都指定非0值, 则 column-count 代表最大列数。
-
column-width 描述瀑布流每一列的列宽 string auto:意味着列宽是被其他属性所决定的(比如 column-count)

<length>:最佳列宽,实际的列宽可能会更宽(需要填充剩余的空间), 或者更窄(如果剩余空间比列宽还要小)。 该值必须大于0
-
column-gap 列与列的间隙. 如果指定了 normal ,则对应 32 string - -
left-gap 左边cell和列表的间隙. 如果未指定 ,则对应 0 string - -
right-gap 右边cell和列表的间隙. 如果未指定 ,则对应 0 string - -

描述

# Event 事件

事件名 说明 参数 返回值
@click 用于监听点击事件。(例如:一般绑定于子组件之上触发跳转)。 - -
@longpress 用于监听长按事件(一般绑定于子组件之上例如:手机淘宝猜你喜欢瀑布流,长按可删除您不感兴趣的商品)。 - -
@appear 用于监听子组件出现事件(一般绑定于子组件之上例如:监听最后一个元素出现,加载新的数据) - -
@disappear 用于监听子组件滑出屏幕事件(一般绑定于子组件之上) - -