二十四、Vue之移动端框架MintUI之上拉分页加载更多

1.引入上拉刷新组件 Infinite Scroll

InfiniteScroll.vue

<template>
    <div>
        <ul 
        v-infinite-scroll="loadMore" 
        infinite-scroll-disabled="loading" 
        infinite-scroll-distance="10">
            <li v-for="(item,key) in list" :key="key">{{ item }}</li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: []
        }
    },
    methods: {
        loadMore() {
            console.log('加载中');
        }
    }
}
</script>

App.vue

<template>
    <div id="app">
        <v-infinitescroll></v-infinitescroll>
    </div>
</template>

<script>
// 引入组件
import InfiniteScroll from "./components/InfiniteScroll.vue";

export default {
    name: 'app',
    data() {
        return {
            list: []
        }
    },
    components: {
        // 2.挂载组件
        'v-infinitescroll': InfiniteScroll
    }
}
</script>

  经过测试即可发现，当页面加载时，会运行 InfiniteScroll#loadMore() 方法，说明该方法类似于生命周期 mounted() 方法，在页面渲染之后调用。利用这一特性，我们可以直接在 InfiniteScroll#loadMore() 方法中请求数据。

2.请求网络数据，实现下拉刷新

<template>
    <div id="scroll">
    
        <ul 
        v-infinite-scroll="loadMore" 
        infinite-scroll-disabled="loading" 
        infinite-scroll-distance="10">
            <li v-for="(item,key) in datas" :key="key">{{ item.title }}</li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            datas: [],
            page: 1
        }
    },
    methods: {
        loadMore() {
            this.requestData();
        },
        // 请求网路数据，实现下拉刷新
        requestData() {
            var url='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=' + this.page;
            this.$http.get(url).then((res) => {
                // 和小程序类似，请求的结果要和以前的结果集合进行合并，这样才能显示所有数据
                this.datas=this.datas.concat(res.body.result);
                // 刷新一次，页码增1
                ++this.page;
            }, (err) => {
                console.log(err);
            });
        }
    }
}
</script>

<style lang="scss" scoped>
#scroll{
    li{
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: left;
    }
}
</style>

注意一：和小程序类似，请求的结果要和以前的结果集合进行合并，这样才能显示所有数据 this.datas=this.datas.concat(res.body.result)
注意二：要想实现下拉刷新，必须刷新一次，页码增1

问题1：当下拉刷新时，会出现重复请求数据，如下：

原因解析：出现这样的原因在于，mint-ui在底层将InfiniteScroll#loadMore() 方法进行异步执行。这样，当请求耗时过长还未完成时，还未执行到++this.page，此时若用户再次下拉，依然会触发请求数据，但this.page依然是上一次请求的数值，所以导致了出现重复请求数据。

解决办法：通过 loading 属性来控制请求开始时，禁止触发下拉刷新（PS：当 loading 为 true 时，不再触发下拉刷新，为 false 则可触发下拉刷新）

<script>
export default {
    data() {
        return {
            datas: [],
            page: 1,
            // 当 loading 为 true 时，不再触发下拉刷新，为 false 则触发下拉刷新
            loading: false
        }
    },
    methods: {
        loadMore() {
            this.requestData();
        },
        // 请求网路数据，实现下拉刷新
        requestData() {
            // 当 loading 为 true 时，不再触发下拉刷新，为 false 则触发下拉刷新
            this.loading = true;

            var url='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=' + this.page;
            this.$http.get(url).then((res) => {
                // 和小程序类似，请求的结果要和以前的结果集合进行合并，这样才能显示所有数据
                this.datas=this.datas.concat(res.body.result);
                // 刷新一次，页码增1
                ++this.page;
                
                // 当 loading 为 true 时，不再触发下拉刷新，为 false 则触发下拉刷新
                this.loading = false;
            }, (err) => {
                console.log(err);
            });
        }
    }
}
</script>

问题2：当下拉刷新到第7页时，已经再无数据返回，此时再下拉刷新无意义。

解决办法：通过返回数据长度控制禁止触发下拉刷新（PS：返回数据长度小于每页数量时，此时可将 loading 设置为true，禁止再次下拉刷新），如下：

<script>
export default {
    data() {
        return {
            datas: [],
            page: 1,
            // 当 loading 为 true 时，不再触发下拉刷新，为 false 则触发下拉刷新
            loading: false
        }
    },
    methods: {
        loadMore() {
            this.requestData();
        },
        // 请求网路数据，实现下拉刷新
        requestData() {
            // 当 loading 为 true 时，不再触发下拉刷新，为 false 则触发下拉刷新
            this.loading = true;

            var url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=' + this.page;
            this.$http.get(url).then((res) => {
                // 和小程序类似，请求的结果要和以前的结果集合进行合并，这样才能显示所有数据
                this.datas = this.datas.concat(res.body.result);
                // 刷新一次，页码增1
                ++this.page;

                if (res.body.result.length < 20) {
                    this.loading = true;
                } else {
                    // 当 loading 为 true 时，不再触发下拉刷新，为 false 则触发下拉刷新
                    this.loading = false;
                }

            }, (err) => {
                console.log(err);
            });
        }
    }
}
</script>