vusjs 配合php_对照着jquery来学vue.js系列之配合thinkphp下拉获取分页数据
上篇文章介绍了vue.js如何ajax获取数据;
接着不可避免就遇到的是;
如何进行数据分页呢?
这里以thinkphp为示例讲解;其他场景性质一样;
示例项目:https://github.com/baijunyao/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
Vue 配合thinkphp分页示例
{{item.name}}
没有数据了
// 获取数据的url
var pageData={
url: "{:U('Home/Vue/page')}",
i: 1,
height: 0,
over: false
}
var vm=new Vue({
el: '.box',
data: {
city: []
},
ready: function(){
this.$http.get(pageData.url).then(function(response){
this.city=response.data;
})
},
})
//获取滚动条当前的位置
function getScrollTop() {
var scrollTop=0;
if(document.documentElement && document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}else if(document.body) {
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
//获取当前可视范围的高度
function getClientHeight() {
var clientHeight=0;
if(document.body.clientHeight && document.documentElement.clientHeight){
clientHeight=Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}else{
clientHeight=Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}
//获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
// 添加 加载中样式
function addLoading(){
var loading=document.createElement('p');
loading.className='loading'
loading.innerHTML='加载中...';
document.body.appendChild(loading);
}
// 删除 加载中样式
function removeLoading(){
var loading=document.querySelector('.loading');
loading.parentNode.removeChild(loading);
}
// 把加载中 改成 没有数据了
function loadingToOver(){
var loading=document.querySelector('.over');
loading.style.display='block';
}
// 监听滚动事件
window.οnscrοll=function () {
if (pageData.over) {
return false;
}
if ( getScrollHeight()-(getScrollTop()+getClientHeight())<=50 ) {
// 页数+1
pageData.i++
// 显示加载
addLoading();
// 获取下一页的数据
vm.$http.get(pageData.url+'/p/'+pageData.i).then(function(response){
removeLoading();
if(response.data.length==0){
pageData.over=true;
loadingToOver();
}else{
vm.city=vm.city.concat(response.data);
}
})
}
}
这已经简单的实现了下拉加载数据的功能;
别被上面这么长的代码吓到了;
里面更多的是用原生的js实现滚动轴监听事件的;
那个加载中和加载完成的样式根据业务设计就好了;
得;最近被一些事搞的很不在状态;
这篇跳票了好多天的文章终于写完了;
更多的直接查看源代码和注释吧;
vusjs 配合php_对照着jquery来学vue.js系列之配合thinkphp下拉获取分页数据相关推荐
- jquery+原生js模拟淘宝输入框下拉提示
1.概述: 模拟淘宝.百度的搜索框,当用户输入时,会自动下拉提示关键字,使用组件jquery.js(1.12.1),jquery-ui.js(1.12.1).jquery-ui.css(1.12.1) ...
- 为什么 那么多 前端开发者都想学 Vue.js
根据JavaScript 2017 前端库状况调查 Vue.js是开发者最想学的前端库.我在这里说明一下我为什么认为这也是和你一起通过使用 Vue 构建一个简单的 App 应用程序的原因. 我最近曾与 ...
- 为什么43%前端开发者想学Vue.js
根据JavaScript 2017前端库状况调查 Vue.js是开发者最想学的前端库.我在这里说明一下我为什么认为这也是和你一起通过使用Vue构建一个简单的App应用程序的原因. 我最近曾与Evan ...
- 【JQuery】使用JQuery实现城市两级或三级联动(下拉菜单)
本文只要是通过使用JQuery实现城市(省.市.县)两级或三级联动,并使用下拉菜单展现.主要的代码如下: 1.在Controller中的代码: @RequestMapping(value=" ...
- 『跟着雨哥学AI』系列之八:趣味案例——有关NLP任务数据预处理的那些事儿...
点击左上方蓝字关注我们 课程简介: "跟着雨哥学AI"是百度飞桨开源框架近期针对高层API推出的系列课.本课程由多位资深飞桨工程师精心打造,不仅提供了从数据处理.到模型组网.模型训 ...
- todomvc html css模板,通过todoMVC来学vue.js的使用
这是vue官网的一个例子,挺适合作为vue应用的入门的. 通过这个应用,我们能学到vue的[双向绑定],[v-for][事件],[计算],[指令]等的应用. 应用预览 这个应用开头是这样的 初始状态. ...
- Jquery操作下拉列表和复选框,自定义下拉
后半部分还有自定义下拉列表和开灯关灯的效果,可以进来来看一下 哦 如果网页有下拉列表和复选框,看一下Jquery怎么来操作他们,主要怎么来选取他们的数据,怎么设置某一项选中 先来看个下拉列表 < ...
- jquery 国际短信区号 鼠标移上实现下拉选择
在这里插入代码片@TOC <style>.inputDiv{width:100%;height:40px;position: relative;margin-bottom:24px;}.p ...
- 小陈学vue.js 过滤器
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: &l ...
最新文章
- swiper用loop不出图片_swiper实现双向控制
- 【Java深入理解】String str = “a“ + “b“ + “c“到底创建了几个对象?
- lnmp mysql 10061问题
- input标签里面的文字位置
- 水起泡器行业调研报告 - 市场现状分析与发展前景预测
- this super 解释
- MIMO系统获取复用增益
- 解决jupyter无法自动打开网页
- [莫队算法 线段树 斐波那契 暴力] Codeforces 633H Fibonacci-ish II
- QQ邮箱代收Gmail邮件,微信第一时间通知Gmail新收邮件
- WebStrom配置好git后文件颜色代表的含义
- 四川大学计算机学院管理手册,机房管理_规章制度_计算机基础教学实验中心 - Powered by 四川大学计算机基础教学实验中心...
- 如何在windows中配置自动生成崩溃文件(.dmp)
- pythondjango学生信息管理系统_Django实现学员管理系统
- 2019杭电多校训练营(第一场)
- 【电商】电商后台设计—库存模块
- SAP-MM知识精解-计划协议-01
- matlab 一些函数的用法
- 全景管家解析高清全景图,支持720yun、AirPano、酷家乐
- 把Excel转换成xml文件
热门文章
- unity3d 绘制小地图_老师!我想用Tilemap做元气骑士款地图!
- react 动态路 嵌套动子路由_react 路由动态加载组件,实现按需加载
- swi 指令能用在C语言吗,内嵌汇编指令的应用举例
- mysql tags_mysql tags table解决方法
- python数学函数_「分享」关于Python整理的常用数学函数整理
- 关于python的全局变量和局部变量、以下描述错误的是_Python:全局变量与局部变量的问题...
- 二十一、文本情感分类二
- 上午写了一段代码,下午就被开除了...
- 97 岁诺奖得主的励志人生:本科学文学,博士转物理,54 岁才开始锂电池研究...
- python线程间通信_python多线程之事件触发(线程间通信)