VUEJS实战之利用laypage插件实现分页（3）

网络编程 2024/9/24 佚名

3 1 2

前言

在上两章的工作中,我们顺利的实现了首页的渲染,但是,只是渲染了一页数据而已.我们可能需要渲染更多的数据,这时候,我们就有必要考虑分页了.

分页有很多种方式,比如异步加载的分页方式.然而对于没有太多使用前端模版框架的朋友来说,一上来就使用这种方式,可能稍微有点难度.因此,我们这章的分页实现,是基于普通的链接分页的方式完成的.

在我们有了更多的前端框架的使用经验之后,我们可以使用更加丰富的分页方法.

事实上,我们自己构建一个分页组件也不是不可以,在移动端我都是自己的代码实现的.但是,我这里要推荐的是使用 laypage 这个分页插件,其官方网址是 (http://laypage.layui.com/).

分页规则制订

首先,我们来看一下接口说明

这里是get接口,因此,如上图所示,正确的请求方式就是,直接在接口的Url后面追加参数.

http://cnodejs.org/api/v1/topics"htmlcode">

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"+id;
 getJson(url,pushDom);
});

如上,就可以根据不同的url来获取不同的数据了.

使用 laypage 实现分页

首先当然是引用文件了.

在html适当的部分,加上分页组件的盒子,如下:

然后,我们在官方网站上把代码给复制过来.适当修改,代码如下

$(function(){
 var id = getUrlId();
 var url = "http://cnodejs.org/api/v1/topics"+id;
 getJson(url,pushDom);
 laypage({
 cont: $(".page"),
 pages: 100,
 curr: id,
 jump: function(e, first){
 if(!first){
 location.href = '"" alt="实现分页最终效果" src="/UploadFiles/2021-04-02/2016061310571762.jpg">
小结
在本章,我们的内容其实和VUE的关系不大.但是,无论是使用什么内容,最终都是以完成项目为目的的.用已经开发好的插件来实现,可以大大提高我们的效率.
附录
VUE官方网站 

cNodeJs Api 详细介绍 

本系列教程源码下载
VUEJS 实战教程第一章,构建基础并渲染出列表 

VUEJS 实战教程第二章,修复错误并且美化时间 

VUEJS 实战教程第三章,利用laypage插件实现分页
本文由FungLeo原创
首发地址:http://blog.csdn.net/FungLeo/article/details/51649074


本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

JavaScript,Vue,laypage,分页

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“VUEJS实战之利用laypage插件实现分页（3）”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年09月24日

VUEJS实战之利用laypage插件实现分页（3）

jquery制做精致的倒计时特效

Bootstrap中的Panel和Table全面解析

评论“VUEJS实战之利用laypage插件实现分页（3）”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接