Vue-waterfall-adaptive NPM

vue-waterfall-adaptive

概述

vue 瀑布流组件，高度自适应，响应式，支持自定义布局，支持多图模式

安装

安装 vue-waterfall-adaptive

npm install vue-waterfall-adaptive

加载 vue-waterfall-adaptive 模块

支持 ES6 与 commonjs 的加载方式

// ES6
import { waterfall, waterfallSilde } from 'vue-waterfall-adaptive';

// commonjs
const waterfall = require("vue-waterfall-adaptive").waterfall;
const waterfallSilde = require("vue-waterfall-adaptive").waterfallSilde;

也可以在 html 文件中使用 script 标签引入脚本，访问全局变量 vueWaterfallAdaptive

<script src="lib/vue-waterfall-adaptive.js"></script>

使用

<waterfall>
  <waterfallSilde>item1</waterfallSilde>
  <waterfallSilde>item2</waterfallSilde>
  <waterfallSilde>item3</waterfallSilde>
  ...
</waterfall>

选项

waterfall 属性

属性	描述	默认值	类型	可选项
top	初始 `top` 值	0	Number	-
top-interval	瀑布流布局上下间距	0	Number	-
left-interval	瀑布流布局左右间距	0	Number	-
width	宽度,组件会根据宽度自动分配每行个数	320	Number	-
loading	是否显示加载中的菊花图	false	Boolean	-
loading-color	菊花图的颜色	#969799	String	-
offset	滚动条距离底部小于 `offset` 时触发 `load` 事件	200	Number	-
finished	是否已加载完成，加载完成后不再触发 `load` 事件	false	Boolean	-
finished-txt	加载完成后的提示文案,如不需要,设置空字符串	没有更多了~	String	-

waterfall 事件

事件名	说明
load	滚动条与底部距离小于 `offset` 时触发

waterfall 方法

方法名	说明
reset	重置瀑布流布局(此方法只重置组件内部高度于位置,外部状态需自己重置,如 finished 属性,页码,数据等)

waterfall 插槽

方法名	说明
default	默认插槽,插入 waterfallSilde 组件
loading	自定义 loading 效果

waterfallSilde 属性

属性	描述	默认值	类型
prefetch	是否需要预加载，在图片不定高时需要设置为 `true`，会预加载所有图片。预加载时为了保证数据，会阻塞后续渲染	false	Boolean
imgs	需要预加载的图片数组，数组每一项为图片 url		string