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.html<!DOCTYPE html><br>
<html><br>
<head><br>
<meta charset="UTF-8"><br>
<title>Vue 配合thinkphp分页示例</title><br>
</head><br>
<body><br>
<p></p><br>
<p></p><br>
<div><br>
<p v-for="item in city">{{item.name}}</p><br>
</div><br>
<br>
<p>沒有資料了</p>
<br>
<br>
<vue></vue><br>
<script><br />
<br />
// 取得資料的url<br />
var pageData={<br />
url: "{:U('Home/Vue/page')}",<br />
i: 1,<br />
height: 0,<br />
over: false<br />
}<br />
var vm=new Vue({<br />
el: '.box',<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('p');<br />
loading.className='loading'<br />
loading.innerHTML='載入中...';<br />
document.body.appendChild(loading);<br />
}<br />
<br />
// 刪除 載入中樣式<br />
function removeLoading(){<br />
var loading=document.querySelector('.loading');<br />
loading.parentNode.removeChild(loading);<br />
}<br />
<br />
// 把載入中 改成 沒有資料了<br />
function loadingToOver(){<br />
var loading=document.querySelector('.over');<br />
loading.style.display='block';<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+'/p/'+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>
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
了解Python編程的入門級程式碼範例
Jan 04, 2024 am 10:50 AM
了解Python程式設計的入門程式碼範例Python是一種簡單易學，功能強大的程式語言。對於初學者來說，了解Python程式設計的入門級程式碼範例是非常重要的。本文將為您提供一些具體的程式碼範例，幫助您快速入門。列印HelloWorldprint("HelloWorld")這是Python中最簡單的程式碼範例。 print()函數用於將指定的內容輸出
Go語言程式設計實例：Web開發中的程式碼範例
Mar 04, 2024 pm 04:54 PM
《Go語言程式設計實例：Web開發中的程式碼範例》隨著網路的快速發展，Web開發已成為各行業中不可或缺的一部分。作為一門功能強大且效能優越的程式語言，Go語言在Web開發中越來越受到開發者們的青睞。本文將透過具體的程式碼範例，介紹如何利用Go語言進行Web開發，讓讀者更能理解並運用Go語言來建立自己的Web應用。 1.簡單的HTTP伺服器首先，讓我們從一個
PHP 變數的實際應用：10 個實際使用範例
Feb 19, 2024 pm 03:00 PM
PHP變數儲存程式運行期間的值，對於建立動態且互動的WEB應用程式至關重要。本文將深入探討php變量，並透過10個真實的範例展示它們的實際應用。 1.儲存使用者輸入$username=$_POST["username"];$passWord=$_POST["password"];此範例從表單提交中提取使用者名稱和密碼，並將其儲存在變數中以供進一步處理。 2.設定配置值$database_host="localhost";$database_username="username";$database_pa
Java實作簡單的冒泡排序程式碼
Jan 30, 2024 am 09:34 AM
Java冒泡排序最簡單的程式碼範例冒泡排序是一種常見的排序演算法，它的基本想法是透過相鄰元素的比較和交換來將待排序序列逐步調整為有序序列。以下是一個簡單的Java程式碼範例，示範如何實作冒泡排序：publicclassBubbleSort{publicstaticvoidbubbleSort(int[]arr){int
如何使用PHP編寫庫存管理系統中的庫存分倉管理功能代碼
Aug 06, 2023 pm 04:49 PM
如何使用PHP編寫庫存管理系統中的庫存分倉管理功能碼庫存管理是許多企業中不可或缺的一部分。對於擁有多個倉庫的企業來說，庫存分倉管理功能尤其重要。透過合理管理和追蹤庫存，企業可以實現不同倉庫之間的庫存調撥，優化營運成本，改善協同效率。本文將介紹如何使用PHP編寫庫存分倉管理功能的程式碼，並為您提供相關的程式碼範例。一、建立資料庫在開始編寫庫存分倉管理功能的程式碼之
華為雲端邊緣運算對接指南：Java程式碼範例快速實作接口
Jul 05, 2023 pm 09:57 PM
華為雲端邊緣運算對接指南：Java程式碼範例快速實現介面隨著物聯網技術的快速發展和邊緣運算的興起，越來越多的企業開始關注邊緣運算的應用。華為雲端提供了邊緣運算服務，為企業提供了高可靠的運算資源和便利的開發環境，使得邊緣運算應用更容易實現。本文將介紹如何透過Java程式碼快速實現華為雲端邊緣運算的介面。首先，我們需要準備好開發環境。確保你已經安裝了Java開發工具包（
從入門到精通：Go語言中常用資料結構的程式碼實現
Mar 04, 2024 pm 03:09 PM
標題：從入門到精通：Go語言中常用資料結構的程式碼實作資料結構在程式設計中起著至關重要的作用，它是程式設計的基礎。在Go語言中，有許多常用的資料結構，掌握這些資料結構的實作方式對於成為優秀的程式設計師至關重要。本文將介紹Go語言中常用的資料結構，並給出對應的程式碼範例，幫助讀者從入門到精通這些資料結構。 1.數組（Array）數組是一種基本的資料結構，是一組相同類型
指導與範例：學習Java選擇排序演算法的實現
Feb 18, 2024 am 10:52 AM
Java選擇排序法程式碼編寫指南及範例選擇排序是一種簡單直觀的排序演算法，其想法是每次從未排序的元素中選擇最小（或最大）的元素進行交換，直到所有元素排序完成。本文將提供選擇排序的程式碼編寫指南，並附上具體的Java範例程式碼。演算法原理選擇排序的基本原理是將待排序數組分為已排序和未排序兩部分，每次從未排序部分選擇最小（或最大）的元素，將其放到已排序部分的末尾。重複上述
