vue-stick

1.0.7 • Public • Published

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 演绎而成。

Readme

Keywords

Package Sidebar

Install

npm i vue-stick

Weekly Downloads

3

Version

1.0.7

License

ISC

Unpacked Size

169 kB

Total Files

15

Last publish

Collaborators

  • bh-lay