上篇文章介绍了vue.js如何ajax获取数据;
接着不可避免就遇到的是;
如何进行数据分页呢?
这里以thinkphp为示例讲解;其他场景性质一样;
示例项目:https://github.com/baijunyao/thinkphp-bjyadmin
示例链接:localhost/Home/Vue/web_page
项目中有张表province_city_area;
里面是全国的3000多个城市;这里就拿它做分页了;
一:thinkphp获取分页数据
/Application/Home/Controller/VueController.class.php
二:前端接收数据的核心部分;
要实现的是移动端往那种下拉就加载数据的效果;
首先是先用ready方法加载第一页的数据显示到页面中;
设置一个变量i=1;
然后呢;判断当滚动轴到底部的时候;
让i+1 作为get参数中的页数;
加载下一页的数据;并追加到city中;
三:完整的html;
/tpl/Home/Vue/web_page.html
这已经简单的实现了下拉加载数据的功能;
别被上面这么长的代码吓到了;
里面更多的是用原生的js实现滚动轴监听事件的;
那个加载中和加载完成的样式根据业务设计就好了;
本文为白俊遥原创文章,转载无需和我联系,但请注明来自白俊遥博客https://baijunyao.com 欢迎捐赠赞赏加入组织创建QQ群及捐赠渠道
︶ ̄暂停ゝ :楼主,这里的vue的js有修改过吗?还有事怎么引用的?
2017-12-21 13:23:06 回复
云淡风晴 :阅读本篇文章;下载示例项目;里面有;
2017-12-24 18:37:01 回复
幸福の约定 :为什么加载出的都是json数据
2017-09-06 09:47:59 回复
开心果呵呵 :善于思考是一种好品质,文章写的很好,博主加油!!
2017-01-12 10:43:05 回复
Ever :
2016-12-05 13:09:40 回复
Ever :
2016-12-05 13:02:13 回复
Ever :6666
2016-12-05 13:02:06 回复
Easy! :2222222222222222222
2016-12-05 10:25:51 回复
Me 工作室 :博主加油!!!
2016-11-24 22:58:37 回复
简简单单 :有一个小bug,如果每次显示20条没有滚动条了就不能显示后面的数据了,可以设置显示器长一点的就第一次加载的数据多一点,让他有滚动条可以吗?
2016-10-18 10:25:26 回复
云淡风晴 :恩;容我寻个完美的方案处理这个问题;
2016-10-18 23:41:27 回复
zhttty :博主加油 文章很好
2016-09-22 09:15:58 回复
云淡风晴 :谢谢;
2016-09-22 22:54:50 回复
null :啦啦啦 啦啦啦 666
2016-09-21 17:40:14 回复
最新评论