vue.js配合thinkphp下拉获取分页数据
- WBOY原创
- 2016-10-09 08:32:152552浏览
对照着jquery来学vue.js系列之配合thinkphp下拉获取分页数据
上篇文章介绍了vue.js如何ajax获取数据；
接着不可避免就遇到的是；
如何进行数据分页呢？
这里以thinkphp为示例讲解；其他场景性质一样；
示例项目：http://git.oschina.net/shuaibai123/thinkphp-bjyadmin
示例链接：localhost/Home/Vue/web_page
项目中有张表province_city_area；
里面是全国的3000多个城市；这里就拿它做分页了；
一：thinkphp获取分页数据/Application/Home/Controller/VueController.class.php<br>
/**<br>
* 配合thinkphp分页示例<br>
*/<br>
public function page(){<br>
// 获取总条数<br>
$count=M('Province_city_area')->count();<br>
// 每页多少条数据<br>
$limit=100;<br>
$page=new \Org\Nx\Page($count,$limit);<br>
$data=M('Province_city_area')<br>
->limit($page->firstRow.','.$page->listRows)<br>
->select();<br>
echo json_encode($data);<br>
}二：前端接收数据的核心部分；
要实现的是移动端往那种下拉就加载数据的效果；
首先是先用ready方法加载第一页的数据显示到页面中；
设置一个变量i=1；var vm=new Vue({<br>
el: '.box',<br>
data: {<br>
city: []<br>
},<br>
ready: function(){<br>
this.$http.get(url).then(function(response){<br>
this.city=response.data;<br>
})<br>
},<br>
})然后呢；判断当滚动轴到底部的时候；
让i+1 作为get参数中的页数；
加载下一页的数据；并追加到city中；i++<br>
vm.$http.get(pageData.url+'/p/'+pageData.i).then(function(response){<br>
// 用concat把下一页的数据追加到city中<br>
vm.city=vm.city.concat(response.data); <br>
})三：完整的html；
/tpl/Home/Vue/web_page.htmlnbsp;html><br>
<br>
<br>
<meta>
<br>
<title>Vue 配合thinkphp分页示例</title>
<br>
<br>
<br>
<p></p>
<br>
<p></p>
<br>
<div>
<br>
<p>{{item.name}}</p>
<br>
</div>
<br>
<br>
<p>没有数据了</p>
<br>
<br>
<vue></vue><br>
<script><br />
<br />
// 获取数据的url<br />
var pageData={<br />
url: "{:U('Home/Vue/page')}",<br />
i: 1,<br />
height: 0,<br />
over: false<br />
}<br />
var vm=new Vue({<br />
el: '.box',<br />
data: {<br />
city: []<br />
},<br />
ready: function(){<br />
this.$http.get(pageData.url).then(function(response){<br />
this.city=response.data;<br />
})<br />
},<br />
})<br />
<br />
<br />
//获取滚动条当前的位置 <br />
function getScrollTop() { <br />
var scrollTop=0; <br />
if(document.documentElement && document.documentElement.scrollTop){ <br />
scrollTop=document.documentElement.scrollTop; <br />
}else if(document.body) { <br />
scrollTop=document.body.scrollTop; <br />
} <br />
return scrollTop; <br />
} <br />
<br />
//获取当前可视范围的高度 <br />
function getClientHeight() { <br />
var clientHeight=0; <br />
if(document.body.clientHeight && document.documentElement.clientHeight){ <br />
clientHeight=Math.min(document.body.clientHeight, document.documentElement.clientHeight); <br />
}else{ <br />
clientHeight=Math.max(document.body.clientHeight, document.documentElement.clientHeight); <br />
} <br />
return clientHeight; <br />
} <br />
<br />
//获取文档完整的高度 <br />
function getScrollHeight() { <br />
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); <br />
} <br />
<br />
// 添加 加载中样式<br />
function addLoading(){<br />
var loading=document.createElement('p');<br />
loading.className='loading'<br />
loading.innerHTML='加载中...';<br />
document.body.appendChild(loading);<br />
}<br />
<br />
// 删除 加载中样式<br />
function removeLoading(){<br />
var loading=document.querySelector('.loading');<br />
loading.parentNode.removeChild(loading);<br />
}<br />
<br />
// 把加载中 改成 没有数据了<br />
function loadingToOver(){<br />
var loading=document.querySelector('.over');<br />
loading.style.display='block';<br />
}<br />
<br />
// 监听滚动事件<br />
window.onscroll=function () {<br />
if (pageData.over) {<br />
return false;<br />
}<br />
if ( getScrollHeight()-(getScrollTop()+getClientHeight())<=50 ) {<br />
// 页数+1<br />
pageData.i++<br />
// 显示加载<br />
addLoading();<br />
// 获取下一页的数据<br />
vm.$http.get(pageData.url+'/p/'+pageData.i).then(function(response){<br />
removeLoading();<br />
if(response.data.length==0){<br />
pageData.over=true;<br />
loadingToOver();<br />
}else{<br />
vm.city=vm.city.concat(response.data); <br />
}<br />
})<br />
} <br />
} <br />
<br />
<br />
</script><br>
<br>
这已经简单的实现了下拉加载数据的功能；
别被上面这么长的代码吓到了；
里面更多的是用原生的js实现滚动轴监听事件的；
那个加载中和加载完成的样式根据业务设计就好了；
得；最近被一些事搞的很不在状态；
这篇跳票了好多天的文章终于写完了；
更多的直接查看源代码和注释吧；
白俊遥博客 http://baijunyao.com/article/88