移动端和PC端无限加载应用

2017-09-27 · xiejiahe

刚好要写这个, 分享一下代码。 移动和PC都可以用, 但是APP用的比较多。

用的是Vue2.0,mint-ui 是一个基于Vue的UI组件库

主要是3个API, 放到你的元素中即可实现

// loadMore是一个方法, 当滚动到底部的时候会触发
v-infinite-scroll="loadMore" 

// loading 是一个属性布尔值, true 表示不会粗发滚动方法否则...
infinite-scroll-disabled="loading" 

// 距离, 看你的需求了。
infinite-scroll-distance="10"

// 用法示例, li 是v-for 出来的数据

<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <li v-for="(item, index) of items" :key="index">{{ item }}</li>
</ul>

前端代码ES5, 完全可以Copy到你的项目中,已经做好处理。

HTTP请求用的是axios 建议大家用,你会爱上他的。axios教程

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无限加载应用</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul,li {
            list-style: none;
        }
        li {
            text-align: center;
            padding: 40px 0;
            font-size: 20px;
        }
        h1 {
            text-align: center;
            color: #f50;
        }
    </style>
</head>
<body>

<div id="app">
    <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <li v-for="(item, index) of items" :key="index">{{ item }}</li>
    </ul>
    <h1 v-show="loading" ref="loading">数据获取中...</h1>
</div>

<script>
var vm = new Vue({
    el: '#app',
    data: {
        items: ['一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求'],        // 这是列表数据,展示用
        page: 0,        // 页数
        loading: false, // 如果是true 无限滚动失效
    },
    methods: {
        // 快到底部的时候回触发这个事件
        loadMore: function () {
            var _this = this;
            this.loading = true;    // 将无限滚动禁止,loading 会显示
            axios.get('http://localhost:3001/api/test', {
                params: {
                    page: this.page++,   // 发送页数给后端
                }
            })
            .then(function (res) {
                _this.loading = false;
                if( res.data.status == 200 ) {
                    res.data.items.forEach(function (el, index) {
                        _this.items.push(el);
                        console.log(el);
                    })
                    return;
                }
                // 没有数据了。不能继续加载了, 后面不会再粗发这个方法
                _this.loading = true;
                _this.$refs.loading.textContent = '已经没有数据了';
            })
            .catch(function (e) {
                _this.loading = false;
                console.log('发生错误');
            })
        }
    }
})
</script>
</body>
</html>

后端是Node.js 代码

var express = require('express')
var app = express();


app.use((req, res, next) => {
    // 设置跨域头
    res.set({
        'Access-Control-Allow-Origin': '*'
    })
    next();
})

// 模拟的数据, 每次10条
var arr = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    [3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
    [4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
    [5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
    [6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
    [7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
    [8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
    [9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
    [10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
    [11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
    [12, 12, 12, 12, 12, 12, 12, 12, 12, 12],
    [13, 13, 13, 13, 13, 13, 13, 13, 13, 13],
    [14, 14, 14, 14, 14, 14, 14, 14, 14, 14],
    [15, 15, 15, 15, 15, 15, 15, 15, 15, 15],
    [16, 16, 16, 16, 16, 16, 16, 16, 16, 16],
    [17, 17, 17, 17, 17, 17, 17, 17, 17, 17],
    [18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
    [19, 19, 19, 19, 19, 19, 19, 19, 19, 19],
    [20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
];

app.get('/api/test', (req, res) => {
    var page = parseInt(req.query.page);
    if( page >= 20 ) {
        res.json({
            status: 0,
            msg: '已经没有数据了',
            page,
            items: []
        })
        return;
    }
    // 模拟从数据库读取要500毫秒时间
    setTimeout(() => {
        res.json({
            status: 200,
            msg: '获取数据成功',
            page,
            items: arr[page]
        })
    }, 500);
})

app.listen(3001)



启动Node.js

npm init
npm install express --save
node app.js
Vue.jsJavaScriptHTML
原创文章,转载请注明出处。