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.htmlnbsp;html><br> <br> <br>     <meta> <br>     <title>Vue 配合thinkphp分页示例</title> <br> <br> <br> <p></p> <br> <p></p> <br> <div> <br>     <p>{{item.name}}</p> <br> </div> <br> <br> <p style="display: none;">데이터 없음</p> <br> <br> <br> <br> <br> // 데이터를 가져올 URL<br> var pageData={<br> URL: "{:U('홈/Vue/페이지')}",<br> 나: 1,<br> 높이: 0,<br> 이상: 거짓<br> }<br> var vm=new Vue({<br> 엘: '.box',<br> 데이터: {<br> 도시: []<br> },<br> 준비: 함수(){<br> This.$http.get(pageData.url).then(함수(응답){<br> This.city=response.data;<br>          })<br> },<br> })<br> <br> <br> //스크롤바의 현재 위치를 가져옵니다 <br> 함수 getScrollTop() { <br> var 스크롤탑=0; If(document.documentElement && document.documentElement.scrollTop){ <br> scrollTop=document.documentElement.scrollTop <br> }else if(document.body) { <br>          scrollTop=document.body.scrollTop <br> }  <br> 스크롤탑 반환 <br> } <br> <br> //현재 시각적 범위의 높이를 가져옵니다 <br> 함수 getClientHeight() { <br> var 클라이언트 높이=0; If(document.body.clientHeight && document.documentElement.clientHeight){ <br> clientHeight=Math.min(document.body.clientHeight, document.documentElement.clientHeight) <br> }그밖에{ <br> clientHeight=Math.max(document.body.clientHeight, document.documentElement.clientHeight) <br> }  <br> 클라이언트 높이 <br> 반환 } <br> <br> //문서의 전체 높이를 가져옵니다 <br> 함수 getScrollHeight() { <br> Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)를 반환합니다. <br> } <br> <br> // 로딩 스타일 추가 <br> 함수 addLoading(){<br> var loading=document.createElement('p');<br> Loading.className='로딩 중'<br> Loading.innerHTML='로드 중...';<br> Document.body.appendChild(로딩);<br> }<br> <br> // 로딩 스타일 삭제 <br> 함수 제거로딩(){<br> var loading=document.querySelector('.loading');<br> Loading.parentNode.removeChild(loading);<br> }<br> <br> // 로드를 데이터 없음으로 변경 <br> 함수 loadingToOver(){<br> var loading=document.querySelector('.over');<br> Loading.style.display='차단';<br> }<br> <br> //스크롤 이벤트 듣기<br> window.onscroll=함수() {<br> If (pageData.over) {<br>          false를 반환합니다.<br> }<br> If (getScrollHeight()-(getScrollTop()+getClientHeight())                  // 페이지 수 +1<br> pageData.i++<br> ​​​​//로드 중 표시<br>          addLoading();<br>                    // 다음 페이지의 데이터 가져오기 <br>          vm.$http.get(pageData.url+'/p/'+pageData.i).then(함수(응답){<br>                                       removeLoading();<br> If(response.data.length==0){<br> pageData.over=true;<br> loadingToOver();<br>               }그밖에{<br>                   vm.city=vm.city.concat(response.data) <br>             }<br>          })<br> }  <br> } <br> <br> <br> <br> 본문><br> 간단히 드롭다운 데이터 로딩 기능을 구현한 것입니다.
위의 긴 코드에 겁먹지 마세요.
더 많은 사람들이 네이티브 js를 사용하여 스크롤 축 모니터링 이벤트를 구현합니다.
비즈니스에 따라 로딩 및 로딩 스타일을 디자인하세요.

알겠습니다. 최근 몇 가지 일로 인해 매우 기분이 좋지 않았습니다.
여러날 미루던 이 글이 드디어 완성되었습니다
자세한 내용은 소스 코드와 주석을 직접 확인하세요.
바이준야오 블로그 http://baijunyao.com/article/88