使用vue-infinite-scroll实现无限滚动-蒲公英云

使用vue-infinite-scroll实现无限滚动

今天在移动端项目中遇见一个需求，需要数据无限滚动。在这里总结一下使用心得

首先引入：

npm install vue-infinite-scroll --save

在vue中的main.js中引入：

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

在代码中使用：

<template>
<section>
    <div class="wrap"
    v-infinite-scroll="loadMore"
    :infinite-scroll-disabled="loading"
    infinite-scroll-distance="20"
    >
    <div v-for="(item, index) in list" :key="index" class="div">
        <li>{
   {item.text}}</li>
    </div>
    </div>
    <section  v-show="loadingTip">
          <span>加载中···</span>
    </section>
</section>
</template>
<script>
export default {
    data() {
        return {
            loading:false,
            loadingTip:false,
            list:[]
        }
    },
    created() {
        const arr = []
        for(let i=0;i<10;i++){
         arr.push({time:'2019-7-23:'+i,text:`hello${i}`})
        }
        this.list = arr;
        this.loadingTip = true
    },
    methods :{
        loadMore() {
        this.loading = true;
        setTimeout(() => {
            const arr = [];
            for (let i=0; i<2 ;i++) {
            arr.push({time:'2019年7月23日:'+i,text:`传奇永不息,Legends Never Die`})
            }
            this.list.push(...arr);
            this.loading = false;
        },1000)
        },
    }
}
</script>
<style>
    .div{
        height: 50px;
        width: 100%;
        text-align: center;
    }
</style>

上面代码效果为：当滚动到数据底部距离页面底部还有20px时，触发loadMore回调函数，一秒过后加载两个数据

v-infinite-scroll="loadMore"表示回调函数是loadMore;``infinite-scroll-disabled="loading"表示由变量loading决定是否执行loadMore. false则执行loadMore，true则不执行。infinite-scroll-distance="20"这里20决定了页面滚动到离页尾多少像素的时候触发回调函数loadMore，20是像素值。通常我们会在页尾做一个几十像素高的“正在加载中…”,或者放一个加载图标。

效果图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vemh1MTk5Nw_size_16_color_FFFFFF_t_70