vue.js는 thinkphp 드롭다운과 협력하여 페이지가 매겨진 데이터를 얻습니다.
- WBOY원래의
- 2016-10-09 08:32:152557검색
对照着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;">데이터 없음</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())<=50) {<br />
// 페이지 수 +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 />
</script><br />
</본문><br>