vue.js は thinkphp ドロップダウンと連携してページ分割されたデータを取得します-php手册-php.cn

vue.js は thinkphp ドロップダウンと連携してページ分割されたデータを取得します

WBOY

リリース： 2016-10-09 08:32:15

オリジナル

2575 人が閲覧しました

对照着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.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue 配合thinkphp分页示例</title> </head> <body> <div> {{item.name}} </div> データなし <vue /> <スクリプト> //データのURLを取得します var pageData={ URL: "{:U('ホーム/Vue/ページ')}", 私：1、 身長: 0, オーバー: false } var vm=新しい Vue({ el: '.box', データ: { 都市: [] }、 準備完了: function(){ This.$http.get(pageData.url).then(function(response){ This.city=response.data; }) }、 }) //スクロールバーの現在位置を取得します 関数 getScrollTop() { var スクロールトップ = 0; If(document.documentElement && document.documentElement.scrollTop){ scrollTop=document.documentElement.scrollTop; }else if(document.body) { scrollTop=document.body.scrollTop; } スクロールトップに戻る } // 現在の視覚範囲の高さを取得します 関数 getClientHeight() { var clientHeight=0; If(document.body.clientHeight && document.documentElement.clientHeight){ clientHeight=Math.min(document.body.clientHeight, document.documentElement.clientHeight); }その他{ clientHeight=Math.max(document.body.clientHeight, document.documentElement.clientHeight); } クライアントの高さを返します } //ドキュメントの完全な高さを取得します 関数 getScrollHeight() { Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)を返します } //読み込みスタイルを追加します 関数 addLoading(){ varloading=document.createElement('p'); Loading.className='loading' Loading.innerHTML='読み込み中...'; Document.body.appendChild(loading); } //読み込みスタイルを削除 関数removeLoading(){ varloading=document.querySelector('.loading'); Loading.parentNode.removeChild(loading); } // 読み込みをデータなしに変更します 関数loadingToOver(){ varloading=document.querySelector('.over'); Loading.style.display='ブロック'; } //スクロールイベントを聞く window.onscroll=function() { If (pageData.over) { 戻るfalseを返します。 } If (getScrollHeight()-(getScrollTop()+getClientHeight()) // ページ数 +1 ページデータ.i++ //読み込み中を表示 addLoading(); // 次のページのデータを取得します vm.$http.get(pageData.url+'/p/'+pageData.i).then(function(response){ RemoveLoading(); If(response.data.length==0){ pageData.over=true; loadToOver(); }その他{ vm.city=vm.city.concat(response.data); } }) } } </スクリプト> </body> </html> これは単にデータをロードするドロップダウン機能を実装しただけです; 上記の長いコードを怖がらないでください;
それらの多くはネイティブ JS を使用してスクロール軸監視イベントを実装しています
ビジネスに応じて読み込みと読み込みのスタイルを設計するだけです

わかりました、最近いくつかのことが原因で体調が悪くなっています
何日も遅れていたこの記事もようやく完成しました
詳細については、ソースコードとコメントを直接参照してください。バイ・ジュンヤオのブログ http://baijunyao.com/article/88