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>