2.0.2 • Published 7 years ago

vue-infinite-scroll v2.0.2

Weekly downloads
24,559
License
MIT
Repository
github
Last release
7 years ago

vue-infinite-scroll

vue-infinite-scroll is an infinite scroll directive for vue.js.

Install

npm install vue-infinite-scroll --save

CommonJS

You can use any build tool which supports commonjs:

// register globally
var infiniteScroll =  require('vue-infinite-scroll');
Vue.use(infiniteScroll)

// or for a single instance
var infiniteScroll = require('vue-infinite-scroll');
new Vue({
  directives: {infiniteScroll}
})

Or in ES2015:

// register globally
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

// or for a single instance
import infiniteScroll from 'vue-infinite-scroll'
new Vue({
  directives: {infiniteScroll}
})

Direct include

You can use the CDN: https://unpkg.com/vue-infinite-scroll, infiniteScroll is exposed to window and will automatically install itself. Also you can use your local copy:

<script src="../node_modules/vue-infinite-scroll/vue-infinite-scroll.js"></script>

Usage

Use v-infinite-scroll to enable the infinite scroll, and use infinite-scroll-* attributes to define its options.

The method appointed as the value of v-infinite-scroll will be executed when the bottom of the element reaches the bottom of the viewport.

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>
var count = 0;

new Vue({
  el: '#app',
  data: {
    data: [],
    busy: false
  },
  methods: {
    loadMore: function() {
      this.busy = true;

      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
});

Options

OptionDescription
infinite-scroll-disabledinfinite scroll will be disabled if the value of this attribute is true.
infinite-scroll-distanceNumber(default = 0) - the minimum distance between the bottom of the element and the bottom of the viewport before the v-infinite-scroll method is executed.
infinite-scroll-immediate-checkBoolean(default = true) - indicates that the directive should check immediately after bind. Useful if it's possible that the content is not tall enough to fill up the scrollable container.
infinite-scroll-listen-for-eventinfinite scroll will check again when the event is emitted in Vue instance.
infinite-scroll-throttle-delayNumber(default = 200) - interval(ms) between next time checking and this time

Development

CommandDescription
npm run buildBuild in umd format
npm testLint code

License

MIT

longlist-liuyingflow-center-platformcenhomenpmyn-dashboard@everything-registry/sub-chunk-3083hitcxedu-uijdlinker-systemjdlinker-weblonglist-master-componetkotekyleancloud-vue-boilerplatelocal-resource-servergruguy-adminhc-autocomplete-paginghexdohy-gbprofile-ahhy-gbprofile-xfhy-gbprofile2hy-gbprofile3hy-gbprofile5hy-gbprofile6hy-gbprofile7hy-gbprofile8hy-groupportrait2hy-groupportrait3hy-flowchart2insight-stageinsight-stage-custom1hy-flowchartmc-vue-demomld-uimingxin-uimultiple-search-inputmsg-bellmy-element-uinewhope_basejswhale-notifyyiyun-componentsyiatatestw-chatw-chat1vuejs-gkpropweb-niu-ysj-uiweb-niu-ysj-ui1vue-meizivue-zheshiyige-projectvue-logene-commonvue-lolvue-select-infinite-scrollwangshukang-uixlb-main-loginworkadminxportal-pcwzzh-dw3yn-mryn-zhidayn-p1zg-front-uipoui2pi-designsyvn-component-builder1tdh-vue-uiotcx-chat-tooltiptap-renderingtiptap-rendering-xiatiantruefuture-tooltipslz-www2-componentsshutoolboot-vue3versiononlinetto_news_feedumomega-foundationvue-antd-tng6vd-h5-video6vd-h5-video-dev109jiayafanglist@andry.dharmawan/vue-component@focus-teach/ui@galaxyproject/galaxy-client@huanbo99/hb-ant-vue@mapgis/webclient-vue-ui@infinitebrahmanuniverse/nolb-vue-i@jdlinker/system@dhealth/wallet-components@dgiot/dgiot-dashboard@centersoft/vue-chat-app@cb-components/forms@beisen/bsapp-libs@hsdata/warrenq-read-tag@springleo/virtual-scroll-table@whinc/web-console@pisx/pi-design@tydic-group/component-base@tydic-group/component-block@sweetbox/login-component@xiaofu1031/dashboardds_ui_20180705dada-designd2m-componentsdata-center-componentsdataenergy-component-builder
2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

8 years ago

0.2.3

8 years ago

0.2.2

8 years ago

0.2.1

8 years ago

0.2.0

8 years ago

0.1.3

8 years ago

0.1.2

8 years ago

0.1.1

8 years ago

0.1.0

8 years ago

0.0.8

8 years ago

0.0.7

8 years ago

0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago