对照着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二：前端接收数据的核心部分；
/**
* 配合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);
}
要实现的是移动端往那种下拉就加载数据的效果；
首先是先用ready方法加载第一页的数据显示到页面中；
设置一个变量i=1；var vm=new Vue({然后呢；判断当滚动轴到底部的时候；
el: '.box',
data: {
city: []
},
ready: function(){
this.$http.get(url).then(function(response){
this.city=response.data;
})
},
})
让i+1 作为get参数中的页数；
加载下一页的数据；并追加到city中；i++三：完整的html；
vm.$http.get(pageData.url+'/p/'+pageData.i).then(function(response){
// 用concat把下一页的数据追加到city中
vm.city=vm.city.concat(response.data);
})
/tpl/Home/Vue/web_page.htmlnbsp;html>这已经简单的实现了下拉加载数据的功能；
别被上面这么长的代码吓到了；
里面更多的是用原生的js实现滚动轴监听事件的；
那个加载中和加载完成的样式根据业务设计就好了；
得；最近被一些事搞的很不在状态；
这篇跳票了好多天的文章终于写完了；
更多的直接查看源代码和注释吧；
白俊遥博客 http://baijunyao.com/article/88
0
0
vue.js配合thinkphp下拉获取分页数据
php中文网
发布时间：2016-10-09 08:32:15
|2911人浏览过
|来源于php中文网
原创
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
C++ 单元测试与代码质量保障
本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法，包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程，以及常见代码质量问题的发现与修复。通过工程化示例，帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。
8
2026.01.16
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
