Norway Porridge Makers

    @vu.trananh/vue-scroll-loader

    2.2.0 • Public • Published

    vue-scroll-loader

    简体中文

    A scroll loading component for vue.js.

    View demo

    Browsers

    Already use IntersectionObserver polyfill compatible with mainstream browsers.

    铬 火狐浏览器 苹果浏览器 6+ 边缘 IE浏览器 7+ 歌剧 安卓系统 4.4+

    Install

    NPM

    npm install vue-scroll-loader

    CDN

    <script src="https://unpkg.com/vue-scroll-loader"></script>

    Usage

    Put <scroll-loader/> below the list, and use loader-* props to define its options.

    When the scroll-loader reaches the bottom of the viewport, the method specified by loader-method is executed.

    <scroll-loader :loader-method="getImageList" :loader-disable="disable">
    </scroll-loader>
    
    <!-- Replace the default loading animation with slot -->
    <scroll-loader :loader-method="getImageList" :loader-disable="disable">
       <div>Loading...</div>
    </scroll-loader>
    import Vue from 'vue'
    import ScrollLoader from 'vue-scroll-loader'
    
    Vue.use(ScrollLoader)
    
    new Vue({
        el: '#app',
        data() {
          return {
            disable: false,
            page: 1,
            pageSize: 30,
            images: [],
          }
        },
        methods: {
          getImageList() {
            axios.get('https://api.example.com/', {
                params: {
                  page: this.page++,
                  pageSize: this.pageSize,
                }
              })
              .then(res => {
                   this.images = [...this.images, ...res.data]
    
                // Stop scroll loading...
                this.disable = res.data.length < this.pageSize
              })
              .catch(error => {
                console.log(error);
              })
          }
        }
      })

    Options

    Props Description Required Type Default
    loader-method Scrolling to the bottom to execute the method. true Function --
    loader-disable scroll-loader will be disabled if the value of this props is true. false Boolean false
    loader-distance The minimum distance between the scroll-loader and the bottom of the viewport before the loader-method method is executed. false Number 0
    loader-color scroll-loader the color of the animation. false String #CCCCCC
    loader-size scroll-loader the size of the animation. false Number 50
    loader-viewport relative viewport element,default top-level document viewport. false Element viewport

    License

    This project is licensed under the MIT License - see the LICENSE file for details

    Acknowledgments

    The default loading animation is from CSSFX

    Install

    npm i @vu.trananh/vue-scroll-loader

    DownloadsWeekly Downloads

    3

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    370 kB

    Total Files

    23

    Last publish

    Collaborators

    • vu.trananh