vue.js配合thinkphp下拉获取分页数据

对照着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> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/2305"> <img src="https://img.php.cn/upload/ai_manual/001/246/273/175782008867948.png" alt="卡拉OK视频制作"> </a> <div class="aritcle_card_info"> <a href="/ai/2305">卡拉OK视频制作</a> <p>卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="卡拉OK视频制作"> <span>178</span> </div> </div> <a href="/ai/2305" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="卡拉OK视频制作"> </a> </div> <br> </div> <br><br><p>没有数据了</p> <br><br><vue></vue><br><script><br /> <br /> // 获取数据的url<br /> var pageData={<br /> url: "{:U(&#039;Home/Vue/page&#039;)}",<br /> i: 1,<br /> height: 0,<br /> over: false<br /> }<br /> var vm=new Vue({<br /> el: &#039;.box&#039;,<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(&#039;p&#039;);<br /> loading.className=&#039;loading&#039;<br /> loading.innerHTML=&#039;加载中...&#039;;<br /> document.body.appendChild(loading);<br /> }<br /> <br /> // 删除 加载中样式<br /> function removeLoading(){<br /> var loading=document.querySelector(&#039;.loading&#039;);<br /> loading.parentNode.removeChild(loading);<br /> }<br /> <br /> // 把加载中 改成 没有数据了<br /> function loadingToOver(){<br /> var loading=document.querySelector(&#039;.over&#039;);<br /> loading.style.display=&#039;block&#039;;<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+&#039;/p/&#039;+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