vue.js cooperates with thinkphp drop-down to obtain paginated data
Oct 09, 2016 am 08:32 AM
對(duì)照著jquery來(lái)學(xué)vue.js系列之配合thinkphp下拉獲取分頁(yè)數(shù)據(jù)
上篇文章介紹了vue.js如何ajax獲取數(shù)據(jù)；
接著不可避免就遇到的是；
如何進(jìn)行數(shù)據(jù)分頁(yè)呢？
這里以thinkphp為示例講解；其他場(chǎng)景性質(zhì)一樣；
示例項(xiàng)目：http://git.oschina.net/shuaibai123/thinkphp-bjyadmin
示例鏈接：localhost/Home/Vue/web_page
項(xiàng)目中有張表province_city_area；
里面是全國(guó)的3000多個(gè)城市；這里就拿它做分頁(yè)了；
一：thinkphp獲取分頁(yè)數(shù)據(jù)/Application/Home/Controller/VueController.class.php<br>
????/**<br>
?????*?配合thinkphp分頁(yè)示例<br>
?????*/<br>
????public?function?page(){<br>
????????//?獲取總條數(shù)<br>
????????$count=M('Province_city_area')->count();<br>
????????//?每頁(yè)多少條數(shù)據(jù)<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>
????}二：前端接收數(shù)據(jù)的核心部分；
要實(shí)現(xiàn)的是移動(dòng)端往那種下拉就加載數(shù)據(jù)的效果；
首先是先用ready方法加載第一頁(yè)的數(shù)據(jù)顯示到頁(yè)面中；
設(shè)置一個(gè)變量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>
})然后呢；判斷當(dāng)滾動(dòng)軸到底部的時(shí)候；
讓i+1 作為get參數(shù)中的頁(yè)數(shù)；
加載下一頁(yè)的數(shù)據(jù)；并追加到city中；i++<br>
vm.$http.get(pageData.url+'/p/'+pageData.i).then(function(response){<br>
????//?用concat把下一頁(yè)的數(shù)據(jù)追加到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分頁(yè)示例</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
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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)
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
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 (
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
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
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.
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
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
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
