vue.js cooperates with thinkphp drop-down to obtain paginated data
对照着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 style="display: none;">No data</p><br>
<br>
<vue /><br>
<script><br>
<br>
//Get the url of the data<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>
//Get the current position of the scroll bar <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>
//Get the height of the current visual range <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>
//Get the complete height of the document <br>
function getScrollHeight() { <br>
Return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); <br>
} <br>
<br>
//Add loading style<br>
function addLoading(){<br>
var loading=document.createElement('p');<br>
Loading.className='loading'<br>
Loading.innerHTML='Loading...';<br>
Document.body.appendChild(loading);<br>
}<br>
<br>
//Delete loading style<br>
function removeLoading(){<br>
var loading=document.querySelector('.loading');<br>
Loading.parentNode.removeChild(loading);<br>
}<br>
<br>
// Change Loading to No Data<br>
function loadingToOver(){<br>
var loading=document.querySelector('.over');<br>
Loading.style.display='block';<br>
}<br>
<br>
//Listen to scroll events<br>
window.onscroll=function () {<br>
If (pageData.over) {<br>
return return false;
}<br>
If (getScrollHeight()-(getScrollTop()+getClientHeight())<=50) {<br />
// Number of pages +1<br />
pageData.i++<br />
//Show loading<br />
addLoading();<br />
// Get the data on the next page<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>
</body><br>
</html>This has simply implemented the function of drop-down loading data;
Don’t be scared by the long code above;
More of them use native js to implement scroll axis monitoring events;
Just design the loading and loading styles according to the business;
Got it; I’ve been very out of sorts recently due to some things;
This article that has been delayed for many days is finally finished;
View the source code and comments directly for more information;
Bai Junyao's blog http://baijunyao.com/article/88
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Learn about introductory code examples for Python programming
Jan 04, 2024 am 10:50 AM
Learn about Python programming with introductory code examples Python is an easy-to-learn, yet powerful programming language. For beginners, it is very important to understand the introductory code examples of Python programming. This article will provide you with some concrete code examples to help you get started quickly. Print HelloWorldprint("HelloWorld") This is the simplest code example in Python. The print() function is used to output the specified content
Go language programming examples: code examples in web development
Mar 04, 2024 pm 04:54 PM
"Go Language Programming Examples: Code Examples in Web Development" With the rapid development of the Internet, Web development has become an indispensable part of various industries. As a programming language with powerful functions and superior performance, Go language is increasingly favored by developers in web development. This article will introduce how to use Go language for Web development through specific code examples, so that readers can better understand and use Go language to build their own Web applications. 1. Simple HTTP Server First, let’s start with a
Java implements simple bubble sort code
Jan 30, 2024 am 09:34 AM
The simplest code example of Java bubble sort Bubble sort is a common sorting algorithm. Its basic idea is to gradually adjust the sequence to be sorted into an ordered sequence through the comparison and exchange of adjacent elements. Here is a simple Java code example that demonstrates how to implement bubble sort: publicclassBubbleSort{publicstaticvoidbubbleSort(int[]arr){int
PHP variables in action: 10 real-life examples of use
Feb 19, 2024 pm 03:00 PM
PHP variables store values during program runtime and are crucial for building dynamic and interactive WEB applications. This article takes an in-depth look at PHP variables and shows them in action with 10 real-life examples. 1. Store user input $username=$_POST["username"];$passWord=$_POST["password"]; This example extracts the username and password from the form submission and stores them in variables for further processing. 2. Set the configuration value $database_host="localhost";$database_username="username";$database_pa
From beginner to proficient: Code implementation of commonly used data structures in Go language
Mar 04, 2024 pm 03:09 PM
Title: From Beginner to Mastery: Code Implementation of Commonly Used Data Structures in Go Language Data structures play a vital role in programming and are the basis of programming. In the Go language, there are many commonly used data structures, and mastering the implementation of these data structures is crucial to becoming a good programmer. This article will introduce the commonly used data structures in the Go language and give corresponding code examples to help readers from getting started to becoming proficient in these data structures. 1. Array Array is a basic data structure, a group of the same type
Huawei Cloud Edge Computing Interconnection Guide: Java code examples to quickly implement interfaces
Jul 05, 2023 pm 09:57 PM
Huawei Cloud Edge Computing Interconnection Guide: Java Code Samples to Quickly Implement Interfaces With the rapid development of IoT technology and the rise of edge computing, more and more enterprises are beginning to pay attention to the application of edge computing. Huawei Cloud provides edge computing services, providing enterprises with highly reliable computing resources and a convenient development environment, making edge computing applications easier to implement. This article will introduce how to quickly implement the Huawei Cloud edge computing interface through Java code. First, we need to prepare the development environment. Make sure you have the Java Development Kit installed (
How to use PHP to write inventory management function code in the inventory management system
Aug 06, 2023 pm 04:49 PM
How to use PHP to write the inventory management function code in the inventory management system. Inventory management is an indispensable part of many enterprises. For companies with multiple warehouses, the inventory management function is particularly important. By properly managing and tracking inventory, companies can allocate inventory between different warehouses, optimize operating costs, and improve collaboration efficiency. This article will introduce how to use PHP to write code for inventory warehouse management functions, and provide you with relevant code examples. 1. Establish the database before starting to write the code for the inventory warehouse management function.
Guidance and Examples: Learn to implement the selection sort algorithm in Java
Feb 18, 2024 am 10:52 AM
Java Selection Sorting Method Code Writing Guide and Examples Selection sorting is a simple and intuitive sorting algorithm. The idea is to select the smallest (or largest) element from the unsorted elements each time and exchange it until all elements are sorted. This article will provide a code writing guide for selection sorting, and attach specific Java sample code. Algorithm Principle The basic principle of selection sort is to divide the array to be sorted into two parts, sorted and unsorted. Each time, the smallest (or largest) element is selected from the unsorted part and placed at the end of the sorted part. Repeat the above
