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

﹏ヽ暗。殇╰゛Y 2021-11-22 12:58 572阅读 0赞

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

首先引入：

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"`这里2`0`决定了页面滚动到离页尾多少像素的时候触发回调函数`loadMore`，2`0`是像素值。通常我们会在页尾做一个几十像素高的“正在加载中...”,或者放一个加载图标。

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vemh1MTk5Nw_size_16_color_FFFFFF_t_70][]

当从服务器拿去数据时，将回调`loadMore`的setTimeout换成ajax请求

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vemh1MTk5Nw_size_16_color_FFFFFF_t_70]: /images/20211122/f53bbd561b654286a5a8486b46b7a0e4.png