/Application/Home/Controller/VueController.class.php
/**
* 配合thinkphp分页示例
*/
public function page(){
// 获取总条数
$count=M('Province_city_area')->count();
// 每页多少条数据
$limit=100;
$page=new \Org\Nx\Page($count,$limit);
$data=M('Province_city_area')
->limit($page->firstRow.','.$page->listRows)
->select();
echo json_encode($data);
}二:前端接收数据的核心部分;var vm=new Vue({
el: '.box',
data: {
city: []
},
ready: function(){
this.$http.get(url).then(function(response){
this.city=response.data;
})
},
})然后呢;判断当滚动轴到底部的时候;i++
vm.$http.get(pageData.url+'/p/'+pageData.i).then(function(response){
// 用concat把下一页的数据追加到city中
vm.city=vm.city.concat(response.data);
})三:完整的html;<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue 配合thinkphp分页示例</title>
</head>
<body>
<p></p>
<p></p>
<div>
<p v-for="item in city">{{item.name}}</p>
</div>
<p style="display: none;">没有数据了</p>
<vue />
<script>
// 获取数据的url
var pageData={
url: "{:U('Home/Vue/page')}",
i: 1,
height: 0,
over: false
}
var vm=new Vue({
el: '.box',
data: {
city: []
},
ready: function(){
this.$http.get(pageData.url).then(function(response){
this.city=response.data;
})
},
})
//获取滚动条当前的位置
function getScrollTop() {
var scrollTop=0;
if(document.documentElement && document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}else if(document.body) {
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
//获取当前可视范围的高度
function getClientHeight() {
var clientHeight=0;
if(document.body.clientHeight && document.documentElement.clientHeight){
clientHeight=Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}else{
clientHeight=Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}
//获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
// 添加 加载中样式
function addLoading(){
var loading=document.createElement('p');
loading.className='loading'
loading.innerHTML='加载中...';
document.body.appendChild(loading);
}
// 删除 加载中样式
function removeLoading(){
var loading=document.querySelector('.loading');
loading.parentNode.removeChild(loading);
}
// 把加载中 改成 没有数据了
function loadingToOver(){
var loading=document.querySelector('.over');
loading.style.display='block';
}
// 监听滚动事件
window.onscroll=function () {
if (pageData.over) {
return false;
}
if ( getScrollHeight()-(getScrollTop()+getClientHeight())<=50 ) {
// 页数+1
pageData.i++
// 显示加载
addLoading();
// 获取下一页的数据
vm.$http.get(pageData.url+'/p/'+pageData.i).then(function(response){
removeLoading();
if(response.data.length==0){
pageData.over=true;
loadingToOver();
}else{
vm.city=vm.city.concat(response.data);
}
})
}
}
</script>
</body>
</html>这已经简单的实现了下拉加载数据的功能;ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。