vue-waterfall-easy 的使用

安装

npm install vue-waterfall-easy --save-dev

引用

import vueWaterfallEasy from 'vue-waterfall-easy'

html

<vue-waterfall-easy
      :maxCols="2"
      :line-gap="200"
      :imgsArr="arr"
      :timeOut="500"
      :reachBottomDistance="100"
      @scrollReachBottom="getData"
      @click="clickFn"
      ref="waterfall"
    >

vue

methods: {
	// 获取数据
    getGoods(type) {
      $refs.waterfall.waterfallOver() //  告诉组件已经是最后一页了

    },
    // 下一页
    getData() {
      this.getGoods()
    },
    // 点击图片的时候跳转 不是打开新页面而是本页面跳转
    clickFn(event, { index, value }) {
      // 阻止a标签跳转
      event.preventDefault()
      // 只有当点击到图片时才进行操作
      if (event.target.tagName.toLowerCase() == 'img') {
        this.$router.push('')
      }
    },
 }

注意事项
1：如果没有高度 则给 vue-waterfall-easy 第一父级加height: 100vh;