vue-waterfallui v0.0.3

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

Event

Slot