VUEJS实战之利用laypage插件实现分页（3）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
前言
在上两章的工作中,我们顺利的实现了首页的渲染,但是,只是渲染了一页数据而已.我们可能需要渲染更多的数据,这时候,我们就有必要考虑分页了.
分页有很多种方式,比如异步加载的分页方式.然而对于没有太多使用前端模版框架的朋友来说,一上来就使用这种方式,可能稍微有点难度.因此,我们这章的分页实现,是基于普通的链接分页的方式完成的.
在我们有了更多的前端框架的使用经验之后,我们可以使用更加丰富的分页方法.
事实上,我们自己构建一个分页组件也不是不可以,在移动端我都是自己的代码实现的.但是,我这里要推荐的是使用 laypage 这个分页插件,其官方网址是 (http://laypage.layui.com/).
分页规则制订
首先,我们来看一下接口说明
这里是get接口,因此,如上图所示,正确的请求方式就是,直接在接口的Url后面追加参数.
http://cnodejs.org/api/v1/topics?page=11
好,那我们的url地址就可以是 //xxx/index.shtml?1 因为我不准备用其他的参数,只要把分页给完成就可以了.因此,可以直接在后面加上分页id,然后通过一个函数获取url中的这个id,追加到接口上面,那么就可以实现我们的需求了.
写代码实现!
获取URL中的ID
如上面所想,我们需要一个函数,这个函数可以正确的获得我们追加在url地址问候好眠的id.
function getUrlId(){
var host = window.location.href;
var id = host.substring(host.indexOf("?")+1,host.length);
return id;
}
如上代码,通过这个函数方法,就可以获得我们追加在url后面的ID了,测试一下
$(function(){
var id = getUrlId();
console.log(id);
var url = "http://cnodejs.org/api/v1/topics";
getJson(url,pushDom);
});
如下图所示:
通过ID我们来获取不同的数据
$(function(){
var id = getUrlId();
var url = "http://cnodejs.org/api/v1/topics?page="+id;
getJson(url,pushDom);
});
如上,就可以根据不同的url来获取不同的数据了.
使用 laypage 实现分页
首先当然是引用文件了.
<script src="http://9i0i.com/pic.php?p=res/js/plugins/laypage/laypage.js"></script>
在html适当的部分,加上分页组件的盒子,如下:
<div class="page"></div>
然后,我们在官方网站上把代码给复制过来.适当修改,代码如下
$(function(){
var id = getUrlId();
var url = "http://cnodejs.org/api/v1/topics?page="+id;
getJson(url,pushDom);
laypage({
cont: $(".page"),
pages: 100,
curr: id,
jump: function(e, first){
if(!first){
location.href = '?'+e.curr;
}
}
});
})
最终效果如下图所示:
小结
在本章,我们的内容其实和VUE的关系不大.但是,无论是使用什么内容,最终都是以完成项目为目的的.用已经开发好的插件来实现,可以大大提高我们的效率.
附录
VUE官方网站
cNodeJs Api 详细介绍
本系列教程源码下载
VUEJS 实战教程第一章,构建基础并渲染出列表
VUEJS 实战教程第二章,修复错误并且美化时间
VUEJS 实战教程第三章,利用laypage插件实现分页
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持程序员之家。
相关文章
这篇文章主要介绍了关于Vue新搭档TypeScript快速入门实践，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue解决ajax跨域的问题，跨域请求：是指协议名、主机名、端口号三者有任何一个不一样，而且跨域请求是请求发出去了，服务器接收并返回了结果，只是浏览器没有接收响应结果。感兴趣的同学可以参考阅读2023-04-04
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
这篇文章主要介绍了Vue2.4+新增属性.sync、$attrs、$listeners的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
Vue导入excel文件的两种方式(form表单和el-upload)
最近开发遇到一个点击导入按钮让excel文件数据导入的需求,下面这篇文章主要给大家介绍了关于Vue导入excel文件的两种方式,分别是form表单和el-upload两种方法,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue多布局模式实现方法，多布局模式可以根据用户角色所在场景切换页面布局，是非常常见的基础功能，感兴趣的同学可以参考下文2023-05-05
这篇文章主要介绍了Vue 项目中遇到的跨域问题及解决方法(后台php)，前端采用vue框架，后台php，具体解决方法，大家参考下本文2018-03-03
下面小编就为大家分享一篇vue实现a标签点击高亮方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue3.0版本强势升级点特性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2022-06-06
这篇文章主要介绍了vue实现可拖拽div大小的方法,可封装为全局方法在项目中所需要地方直接调用（mixins），本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-04-04
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
这篇文章主要介绍了Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面),本文通过实例代码文字说明给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
最新评论