【簡單好用,支援PC/移動端】 vue-waterfall2 基於Vue.js 瀑布流元件
阿新 • • 發佈:2019-01-01
[email protected]
- 1.寬度自適應,資料繫結特性
- 2.自定義程度高
- 3.使用極為簡便,適用於PC/移動端
- 4.提供Event:loadmore (pc端滑動到底部觸發,移動端需要上拉觸發)
- 5.後期將持續更新,提供animation(過渡動畫,橫向瀑布流)
有問題歡迎提issues
Demo
npm i
npm run dev
Installation
npm install --save vue-waterfall2
Usage
注意:
- 1. itemWidth需要與gutterWidth一起使用才會生效,否則會進行自適應寬度(使用rem佈局時,需先計算出高度再傳值)
- 2.使用了waterfall的父元件 style 不允許使用scoped,否則樣式會有問題
main.js
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
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">{{item.title}}</div>
<div class="item-footer">
<div class="avatar" :style="{backgroundImage : `url(${item.avatar})` }"></div>
<div class="name">{{item.user}}</div>
<div class="like" :class="item.liked?'active':''" >
<i ></i>
<div class="like-total">{{item.liked}}</div>
</div>
</div>
</div>
</div>
</template>
</waterfall>
</div>
</template>
/*
注意:
1.itemWidth需要與gutterWidth一起使用才會生效,否則會進行自適應寬度(使用rem佈局時,需先計算出高度再傳值)
2.使用了waterfall的元件不允許使用scoped,否則樣式會有問題
*/
import Vue from 'vue'
export default{
data(){
return{
data:[],
col:'5',
}
},
computed:{
itemWidth(){
return (138*0.5*(document.documentElement.clientWidth/375)).toString() #rem佈局 計算寬度
},
gutterWidth(){
return (9*0.5*(document.documentElement.clientWidth/375)).toString() #rem佈局 計算x軸方向margin(y軸方向的margin自定義在css中即可)
}
},
methods:{
mix(){
this.$waterfall.mix()
},
switchCol(col){
this.col = col
console.log(this.col)
},
loadmore(index){
this.data = this.data.concat(this.data)
}
}
}
Props
Name | Default | Type | Desc |
---|---|---|---|
col | ‘2’ | String | the number of column |
width | null | String | the value of width |
gutterWidth | 10 | String | the value of margin |
data | [] | Array | data |
Events
Name | params | Desc |
---|---|---|
loadmore | null | Slide to the bottom to trigger on PC / pull up to trigger on Mobile |
scroll | obj | Touchmove to trigger and get the info of scroll |
$waterfall API
this.$waterfall.resize()
this.$waterfall.mix()
License
Released under the MIT License.