分类 vue.js 下的文章

axios 实现点击加载更多列表

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Load More Test</title>
</head>
<body>
    <div id="container">
        <ul id="example-1">
            <li v-for="(item, index) in newslists">
                {{ index + 1 }} - {{ item.title }}
            </li>
        </ul>
        
        <div>
            <button v-if="hasmore" @click="loadmore">加载更多</button>
            <span v-else>已经到底了</span>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
    <script>
        var app = new Vue({
            el: '#container',
            data: {
                page: 1,
                pagesize: 4, // 每页条数
                hasmore: false,
                url: 'http://localhost/api.php/list/5',
                newslists: [],
                pagecount: 1
            },
            computed: {
                
            },
            watch: {
               
            },
            created: function () {
                var vm = this
                
                axios.get(vm.url + '/num/' + vm.pagesize + '/page/' + vm.page)
                    .then(function(res){
                        vm.newslists = res.data.data
                        vm.pagecount = Math.ceil(res.data.rowtotal / vm.pagesize)
                        vm.hasmore = (vm.page < vm.pagecount) ? true : false
                    })
            },
            methods: {
                loadmore: function () {
                    var vm = this
                    vm.page = vm.page + 1
                    
                    axios.get(vm.url + '/num/' + vm.pagesize + '/page/' + vm.page)
                        .then(function(res){
                            vm.newslists = vm.newslists.concat(res.data.data)
                            vm.hasmore = (vm.page < vm.pagecount) ? true : false
                        })
                }
            }
        })
    </script>
</body>
</html>