vue-waterfall2 基于Vue.js 瀑布流组件
2024-09-05 22:46:34
vue-waterfall2
- 1.宽度自适应,数据绑定特效(适用于上拉加载更多)
- 2.自定义程度高
- 3.使用极为简便,适用于PC/移动端
- 4.提供resize(强制刷新布局-适用于下拉刷新)/mix(扰乱布局) API，一般情况下不需要用到
- 5.后期将持续更新，提供animation（过渡动画）
Demo
Installation
npm install --save vue-waterfall2
Usage
注意:
1.itemWidth需要与gutterWidth一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出高度再传值)
2.使用了waterfall的组件不允许使用scoped,否则样式会有问题
main.js
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
app.vue
<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" @finish="finish" >
<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)
},
finish(){
console.log('finish')
}
},
<waterfall> 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 |
$waterfall API
this.$waterfall.resize()
this.$waterfall.mix()
原文地址：https://segmentfault.com/a/1190000017042878
最新文章
- Android Studio 导入百度地图jar和so的正确方式
- IBM HTTP Server Performance Tuning
- jQuery owlcarousel 旋转木马
- php 安装composer
- win7下设置 WiFi AP
- ISLR系列：(3)重采样方法 Cross-Validation & Bootstrap
- java--加强之 eclipse开发工具
- 得力D991CN Plus计算器评测（全程对比卡西欧fx-991CN X）
- [Swift]LeetCode161. 一次编辑距离 $ One Edit Distance
- Spring Ioc工作机制 初步
- Linux LVM逻辑卷配置过程详解（创建，增加，减少，删除，卸载）
- tomcat端口设置
- php 序列化与反序列化
- nginx 域名绑定
- as2 fla 关于影片在时间轴的问题
- 大数据入门第九天——MapReduce详解（六）MR其他补充
- socket缓冲区以及阻塞模式
- android基础学习-Fragment和eclipse快捷键
- Python用MySQLdb， pymssql 模块通过sshtunnel连接远程数据库
- nodejs面试题