vue-waterfall2
- 1.不需知道元素宽高,可宽高自适应
- 2.自定义程度高,布局未采用绝对定位
- 3.使用极为简便,适用于PC/ios/android
- 4.提供Event:loadmore (pc/android端滑动到底部触发,ios端需要上拉触发)
- 5.兼容性好,兼容ES5
有问题欢迎提issues、suggestions
Demo
npm i
npm run dev
Installation
npm i vue-waterfall2@latest --save
Usage
注意:
- 1. itemWidth需要与gutterWidth一起使用才会生效,否则会进行自适应宽度(使用rem布局时,需先计算出高度再传值)
- 2.使用了waterfall的父组件 style 不允许使用scoped,否则样式会有问题
main.js
Vue
app.vue(此组件 style不使用 scoped)
<template> <div class="container-water-fall"> <div><button @click="loadmore">loadmore</button> <button @click="mix">mix</button> <button @click="switchCol('5')">5列</button> <button @click="switchCol('8')">8列</button> <button @click="switchCol('10')">10列</button> </div> <waterfall :col='col' :gutterWidth="gutterWidth" :data="data" @loadmore="loadmore" > <template > <div class="cell-item" v-for="(item,index) in data"> <img :src="item.img" /> <div class="item-body"> <div class="item-desc">itemtitle</div> <div class="item-footer"> <div class="avatar" :style="{backgroundImage : `url(${item.avatar})` }"></div> <div class="name">itemuser</div> <div class="like" :class="item.liked?'active':''" > <i ></i> <div class="like-total">itemliked</div> </div> </div> </div> </div> </template> </waterfall> </div></template> /* 注意: 1.itemWidth需要与gutterWidth一起使用才会生效,否则会进行自适应宽度(使用rem布局时,需先计算出高度再传值) 2.使用了waterfall的组件不允许使用scoped,否则样式会有问题*/ { return data: col:5 } computed: { return 138*05*documentdocumentElementclientWidth/375 #rem布局 计算宽度 } { return 9*05*documentdocumentElementclientWidth/375 #rem布局 } methods: { this$waterfall } { thiscol = col console } { thisdata = thisdata }
Props
Name | Default | Type | Desc |
---|---|---|---|
col | 2 | Number | the number of column |
width | null | Number | the value of width |
gutterWidth | 10 | Number | the value of margin |
data | [] | Array | data |
Events
Name | Data | Desc |
---|---|---|
loadmore | null | Scroll to the bottom to trigger on PC / pull up to trigger on Mobile |
scroll | obj | Scroll to trigger and get the info of scroll |
$waterfall API
this.$waterfall.resize()
this.$waterfall.mix()