VUEJS实战之利用laypage插件实现分页（3）
前言
在上两章的工作中,我们顺利的实现了首页的渲染,但是,只是渲染了一页数据而已.我们可能需要渲染更多的数据,这时候,我们就有必要考虑分页了.
分页有很多种方式,比如异步加载的分页方式.然而对于没有太多使用前端模版框架的朋友来说,一上来就使用这种方式,可能稍微有点难度.因此,我们这章的分页实现,是基于普通的链接分页的方式完成的.
在我们有了更多的前端框架的使用经验之后,我们可以使用更加丰富的分页方法.
事实上,我们自己构建一个分页组件也不是不可以,在移动端我都是自己的代码实现的.但是,我这里要推荐的是使用 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="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前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
门户（Portal）的概念是Vue3的新功能之一，也就是将模板 HTML 移至 DOM 的不同部分的方法。Portal 是 React 中的常见功能，Vue2 的 portal-vue 库也提供了相似的功能。在 Vue3 中用 Teleport 对这个概念提供了原生支持。本文将介绍Teleport的相关用法2021-05-05
下面小编就为大家分享一篇改变vue请求过来的数据中的某一项值的方法(详解)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue中element-ui表格缩略图悬浮放大功能的实例代码
element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？下面小编通过实例代码给大家介绍vue中element-ui表格缩略图悬浮放大功能，一起看看吧2018-06-06
这篇文章主要介绍了vue-property-decorator使用手册，文中较详细的给大家介绍了他们的用法，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
插槽（Slot）是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性,下面这篇文章主要给大家介绍了关于vue2中插槽(slot)的基本使用规范的相关资料,需要的朋友可以参考下2022-03-03
本篇文章主要介绍了vue使用Axios做ajax请求详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
vue2 使用echarts实现地图点击进入下一层级+点击空白处回退功能
这篇文章主要介绍了vue2 使用echarts实现地图点击进入下一层级+点击空白处回退,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2024-05-05
ESLint是一个QA工具，这篇文章主要介绍了详解ESLint在Vue中的使用小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
本篇文章主要介绍了vue指令以及dom操作详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了Vue3 + Vue-PDF 实现PDF 文件在线预览实战，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
最新评论