vue.js配合thinkphp下拉取得分頁數據-php手册-PHP中文網

首頁

php教程

php手册

vue.js配合thinkphp下拉取得分頁數據

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 09, 2016 am 08:32 AM

对照着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++ vm.$http.get(pageData.url+'/p/'+pageData.i).then(function(response){ // 用concat把下一页的数据追加到city中 vm.city=vm.city.concat(response.data); })三：完整的html；
/tpl/Home/Vue/web_page.htmlnbsp;html> <meta> <title>Vue 配合thinkphp分页示例</title> <div> {{item.name}} </div> 沒有資料了 <vue></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> 這已經簡單的實作了下拉載入資料的功能；
別被上面這麼長的程式碼嚇到了；
裡面更多的是用原生的js實現滾動軸監聽事件的；
那個加載中和加載完成的樣式根據業務設計就好了；

得；最近被一些事搞的很不在狀態；
這篇跳票了很多天的文章終於寫完了；
更多的直接查看原始碼和註解吧；
白俊遙部落格 http://baijunyao.com/article/88