上篇文章介紹了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/**

* 配合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.html

Vue 配合thinkphp分頁示例

{{item.name}}

沒有數據了

// 獲取數據的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.οnscrοll=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);

}

})

}

}

這已經簡單的實現了下拉加載數據的功能；

別被上面這么長的代碼嚇到了；

里面更多的是用原生的js實現滾動軸監聽事件的；

那個加載中和加載完成的樣式根據業務設計就好了；

得；最近被一些事搞的很不在狀態；

這篇跳票了好多天的文章終于寫完了；

更多的直接查看源代碼和注釋吧；

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vusjs 配合php_对照着jquery来学vue.js系列之配合thinkphp下拉获取分页数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。