下拉加载

DEMO 下拉加载 infinite-scroll

<template>

          <div>
            <slot name="list"></slot>
              <div class="list-donetip" v-show="!isLoading && isDone">
              <slot>没有更多数据了</slot>
          </div>
          <div class="list-loading" v-show="isLoading">
              <slot>加载中</slot>
          </div>
      < /div>

 </template>


<script type="text/babel">

export default {
    data() {
        return {
            isLoading: false,
            isDone: false,
        }
    },
    props: {
        onInfinite: {
            type: Function,
            required: true
        },
        distance : {
            type : Number,
            default：100
        }
    },
    methods: {
        init() {
            this.$on('loadedDone', () => {
                this.isLoading = false;
                this.isDone = true;
            });

            this.$on('finishLoad', () => {
                this.isLoading = false;
            });
        },
        scrollHandler() {
            if (this.isLoading || this.isDone) return;
            let baseHeight = this.scrollview == window ? document.body.offsetHeight : this.scrollview.offsetHeight
            let moreHeight = this.scrollview == window ? document.body.scrollHeight : this.scrollview.scrollHeight;
            let scrollTop = this.scrollview == window ? document.body.scrollTop : this.scrollview.scrollTop

            if (baseHeight + scrollTop + this.distance > moreHeight) {
                this.isLoading = true;
                this.onInfinite()
            }
        }
    },
    mounted() {
        this.scrollview = window
        this.scrollview.addEventListener('scroll', this.scrollHandler, false);
        this.$nextTick(this.init);
    },
}
</script>

2.png
3.png

父组件中调用 infinite-scroll 组件

<template>

  <div>
      <infinite-scroll :on-infinite='loadData' ref='infinite'>
           <ul slot='list'>
              <li v-for='n in Number'></li>
           </ul>
      </infinite-scroll>
  </div>


</template>
<script type="text/babel">
import 'InfiniteScroll' from '.......' //引入infinitescroll.vue文件
export default {
     data () {
       return {
          Number : 10
       }
     },
     methods : {
       loadData () {
         setTimeout(()=>{
            this.Number = 20
            this.$refs.infinite.$emit('loadDone')
         },1000) 
       }
    }
}
</script>

4.png