v-scrolljs

    1.0.10 • Public • Published

    v-scrolljs

    Infinite scroll list for Vue.js.

    Demo

    Installation

    npm install -S v-scrolljs

    Import

    import VScrolljs from 'v-scrolljs'
    import 'v-scrolljs/dist/static/css/v-scrolljs.css'
     
    export default {
      ...
      components: {
        scroll: VScrolljs,
      },
      ...
    }

    Usage

    <template>
      <div>
        ...
          <scroll :list="items" :fetch="fetchItem" :total="page.total" :offsetItems="30">
              <template slot="tombstone" slot-scope="props">
                  <div style="height: 50px;">loading....</div>
              </template>
     
              <template slot="item" slot-scope="props">
                  <div style="border-bottom: 1px solid #eee;padding:10px 20px;word-break: break-all;">
                      <b>{{props.index}}&nbsp;&nbsp;</b>
                      <span>{{props.data}}</span>
                  </div>
              </template>
              <template slot="bottom">
                    All loaded
              </template>
          </scroll>
        ...
      </div>
    </template>
     
    <script>
    import VScrolljs from 'v-scrolljs.js'
    import 'v-scrolljs/dist/static/css/v-scrolljs.css'
    const MESSAGES = [
        'data1',
        'data2',
        'data3',
    ]
    export default {
        name: 'App',
        components: {
            scroll: VScrolljs
        },
        data () {
            return {
                items: [],
                page: {
                    total: 3,
                    pageSize: 200,
                    pageNumber: 1
                }
            }
        },
        methods: {
            fetchItem () {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        const items = MESSAGES.slice(this.items.length, this.items.length + this.page.pageSize)
                        for (var i = 0; i < items.length; i++) {
                            this.items.push(items[i])
                        }
                        resolve()
                    }, 300)
                })
            }
        }
    }
    </script> 

    Options

    Directive Type Default
    list Array required List of items
    total Number 1 The number of total list
    offsetItems Number 20 Number of additional nodes loaded outside the visual area
    fetch Function false The function of loading more items(async function)
    resize Boolean false recalculate the height of each item When the resize event is triggered
    itemHeight Number 0 Setting each item to the same height will reduce unnecessary calculations.

    Development

    # install dependencies
    npm install
     
    # serve with hot reload at localhost:8080
    npm run dev
     
    # build for production with minification
    npm run build

    Install

    npm i v-scrolljs

    DownloadsWeekly Downloads

    1

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    774 kB

    Total Files

    35

    Last publish

    Collaborators

    • no-reply