Notorious Penguin Magicians

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

    Keywords

    Install

    npm i vue-stick

    DownloadsWeekly Downloads

    20

    Version

    1.0.7

    License

    ISC

    Unpacked Size

    169 kB

    Total Files

    15

    Last publish

    Collaborators

    • bh-lay