记录vue-waterfall-easy的踩坑之路

记录vue-waterfall-easy的踩坑之路

今天下午准备完成主页的vue瀑布流布局,考虑到布局之后还有无限滚动加载,所以打算直接找一个插件来完成

vue-waterfall

首先试的vue-waterfall这个插件,waterfall是一个vue.js瀑布流布局组件,基于vue2.x

安装:

npm install --save vue-waterfall

引入:

ES6
/* in xxx.vue */

import Waterfall from 'vue-waterfall/lib/waterfall'
import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'

export default {
  components: {
    Waterfall,
    WaterfallSlot
  }
}

但是这个插件的问题是传入的图片需要给它宽度和高度,所以只能预先写在传入的数据里面,无法判断图片高度的情况下,高度无法自适应。接下来,看到了另外一个插件——vue-waterfall-easy,于是开始了vue-waterfall-easy的踩坑之路

github地址:https://github.com/MopTym/vue-waterfall

vue-waterfall-easy

vue-waterfall-easy是一个vue组件,包含瀑布流布局和无限滚动加载。相比其他实现方式,无需在返回的数据中指定图片的宽度和高度

安装:

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

引入:

Es6: 
  import vueWaterfallEasy from 'vue-waterfall-easy'
  export default {
      name: 'app',
      data() {
        return {
          imgsArr: [],
          group: 0,// request param
        }
      },
      components: {
        vueWaterfallEasy
      },
      methods: {
        getData() {
          axios.get('./static/mock/data.json?group=' + this.group)
            .then(res => {
              this.imgsArr = this.imgsArr.concat(res.data)
              this.group++
            })
        },
      },
      created() {
        this.getData()
      }
    }

这个插件的问题是

  1. 排列的图片超过当前屏幕显示的高度时,即出现下滑时,才能无限滚动加载

  2. 当此瀑布流不是单一页面时,需要通过slot="waterfall-head"解决,子组件开发时需要放在父组件中使用,即子组件都要在父组件的

    (子组件)
    中使用,虽然可以放在其中使用,但是如果子组件较为复杂,容易出现很多问题,不建议这样使用

  3. 有其他内容时出现两个滑动条,去掉自带的即可(可能出现其他问题QAQ,比如瀑布流常见的回到顶部,当去掉自带的时,本插件position脱离文档流,很难实现该功能)

使用方式:


  
waterfall-head

github地址:https://github.com/lfyfly/vue-waterfall-easy

你可能感兴趣的:(前端vue)