bh-lay / vue-stick

一款基于 VUE 的瀑布流组件。 A waterfall flow component based on vue.js

vue-stick

A waterfall flow component based on vue.js

一款基于 vue.js 的瀑布流组件。

demo: https://bh-lay.github.io/vue-stick/demo/

实例 : http://bh-lay.com/blog

如何引入

您可以下载 dist 目录下的产出文件至您的项目中，用任何您希望使用的方式引入。 产出文件包含 umd 模块、ES 模块两个版本，您可以根据自己的项目自行选择。

也可以通过 npm 安装。

npm install -s vue-stick

引入 vue-stick 之后，您可以选择安装为 Vue 全局模块，也可以局部使用。

var Stick = require('vue-stick')
// 全局注册
Vue.use(Stick)

// 局部注册
new Vue({
	data: {},
	components: {
		Stick: Stick.component
	}
})

如何使用

template

<Stick
	:list="list"
	@onScrollEnd="loadMore"
	>
  <template slot-scope="scope">
		<div class="card">
      <img v-if="scope.data.cover" :src="scope.data.cover"/>
      <h2>{{scope.data.title}}</h2>
      <p>{{scope.data.intro}}</p>
    </div>
  </template>
</Stick>

vue

{
  data: {
    list: [
      {
        "cover": "http://static.bh-lay.com/.../share.jpg",
        "intro": "2018 年对于我来说是非...",
        "title": "剧中人的2018年终总结"
      },
      {
        "cover": "http://static.bh-lay.com/.../cover.jpg",
        "intro": "再次见到合肥，在历经五年的沪漂之后...",
        "title": "再见 · 合肥"
      }
    ]
  },
	methods: {
    loadMore: function () {
      this.list.push({
        "cover": "http://static.bh-lay.com/...yout.png",
        "intro": "今天的分享主要围绕 可视化布局模块的一些...",
        "title": "added by scroll 可视化布局模块开发分享"
      })
    }
  }
}

参数

参数	类型	必填	默认值	解释
list	Array	必填	[]	瀑布流数据列表
columnWidth	Number	-	280	卡片宽度
columnSpacing	Number	-	10	卡片间距
loadTriggerDistance	Number	-	1000	滚动加载距离边界值
animationClass	String	-	'stick-fade-in'	卡片插入时的动画class

说明：

因瀑布流的特殊性，请尽可能保证卡片內布局的稳定性。为响应可能的高度变化，本组件会延迟到第一张图片加载完成后再渲染。

该项目由原生瀑布流组件 stick 演绎而成。