vue-waterfallui

这是一款基于 vue2.x 的轻量级瀑布流插件

npm

npm install --save vue-waterfallui

yarn

$ yarn add save vue-waterfallui

code

main.js:

import Vue from 'vue'
import vueWaterfall from 'vue-waterfallui'
Vue.use(vueWaterfall);

template:

<template>
  <div id="app"> 
    <div>
      <vueWaterfall :content='content' :finished='finished'  @load="getTripList"> 
        <template v-slot="{ item,index }"> 
            <div class="testWatefall"> 
              <img :src="item.path" alt="" class=""> 
              <span class="title">{{ item.title }} {{ index }}</span>  
              <img src="https:xxxxxxxxxxxxxx.png" alt="">
            </div> 
        </template> 
      </vueWaterfall>  
    </div>
  </div>
</template>
<script>   
export default {   
  data() {
    return {
      date: '',
      show: false,
      content:[],
      loading:false,
      finished:false
    }
  },
   methods: { 
    getTripList() {   
      for(let i = 0; i < 20; i++){
        let obj = {
          path:"https:xxxxx.png",
          title:"新款第3代车载手机支架车载后视镜手机支架导航支架多功能车载手机支架汽车用品后视镜挂架多功能热门同款 第3代【创意款】不遮视线/用坏免费换新",
          id:7+i
        }
        if(i % 2 != 0) {
          obj.title = '【驱寒神器】锐舞 热水袋暖手宝暖宝宝暖水袋电暖宝大姨妈神器热敷充电式暖手暖脚暖宫暖腰石墨烯保暖神器 无水加热|持久恒温'
          obj.path = 'https:xxxxx.png'
        }
        this.content.push(obj)
      }
      this.finished = true
    }
  },
};
</script>

<style lang="less" scoped> 
img{
  width: 100%; 
}
*{
  padding: 0;
  margin: 0;
}
.title{
  font-size: 25px;
}
.testWatefall{
  width:  340px;
  background: #cccc;
  border-radius: 10px;
  overflow: hidden;
  padding: 5px;
  margin-bottom: 10px;
}
</style>

API

| 参数 | 说明 | 类型 | 默认值 | 版本 | | -------------- | ------------------------------------------- | ---------------- | ------- | ---- | | columnCount | 列数 | Number | 2 | - | | content | 数据列表 | Array | [] | - | | finished | 是否结束加载数据 | Boolean | false | - | | offset | 触发加载的距离阈值，单位为px | Number | 300 | - | | bottomH | 每行底部间隔 | Number | 20 | - |

Event

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

Slot

| 名称 | 说明 | | ------- | -------------------- | | item | 单条数据 | | index | 当前数据所在列的下标 |