如果在前端渲染页数（用户点击哪一页就去渲染相邻的5页出来，并且添加点击事件，然后渲染“上一页”和“下一页”的点击变化事件）

最新推荐文章于 2022-12-16 17:36:53 发布
最新推荐文章于 2022-12-16 17:36:53 发布
阅读量325 收藏 1
点赞数 1
分类专栏： java 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Andre_dong/article/details/110259510
版权

我们如果想要去渲染这5页的商品信息，该怎么去渲染呢？什么是渲染呢？渲染就是比如你这个页面只有5页，所以你一打开这个页面我就会给你下载这5页的商品信息下来，提前给你渲染好。然后你打开就不用愁了。
在这里插入图片描述
首先你在前端中找到这5页的li，除了第一页之外全部都要删掉，为什么要删掉呢？因为我们要用到遍历的方法把其他页面补上去
在这里插入图片描述
我们的遍历方法就像下面一样这么去写。然后用花括号包住这个i

在这里插入图片描述

然后就会得到这样的结果，这个结果就是表示这5页都是激活的状态，正常的话我们的这5页只有1页是激活的，其他页都是未激活的状态（也就是有个框）
在这里插入图片描述

这里有个问题，也就是如果总页数少于5的话，那么我们渲染的页数就不是5了，因为总共页数少于5值怎么渲染，对吧？所以我们要写个方法进行判断，如果最小值是5，那就可以渲染5页，如果小于5，则渲染totalPage页
在这里插入图片描述

我们给totalPage值设默认值为1，也就是最少都是1页
在这里插入图片描述

然后我们再把获取到的商品列表信息传过来进行获取。这时候获取的totalPage是根据你的商品的多少而决定的，并不是1了，1只是保证你如果没有商品信息列表的情况下，有个默认值而已。
在这里插入图片描述

如果有一种情况，就是当前选择页在最前面，最后面，或者中间，那我们该如何进行渲染（最前面，最后面，中间的意思就是假如有50页，渲染页面在前5页，或者后5页，还是中间的5页）

首先定义默认值page为1
在这里插入图片描述
写上index为i
在这里插入图片描述

无论在前，后还是中间，这5个渲染页面都会有自己的编号，从1到5
在这里插入图片描述

下面就是index的方法，search.page代表当前页，i就是代表上图中所说的每个渲染页面都有自己的编号，从1到5，在哪一页，那个页的编号就为i，totalPage就是总页数

下面的方法对应三种情况，一种是最前面，一种是最后面，一种是中间。
在这里插入图片描述

可以看到出错了，是什么原因呢？我们打断点测试一下

在这里插入图片描述
underfind就是未知的意思，也就是当前页的页数未知

在这里插入图片描述

下图为原因和解决方法
在这里插入图片描述
刷新一下就显示了。

在这里插入图片描述
如果把当前页改成9，效果如下，但是效果不足，因为每一页都显示激活状态

在这里插入图片描述

我们要在这里进行修改，active表示激活的意思，判断当前页面是否是当前页面，如果是当前页面的话就是被激活的页面。
在这里插入图片描述
重新刷新，就可以看到是第一页才是激活状态。

在这里插入图片描述

我们还要给当前页面一个点击事件，也就是我们当前页选中哪一页都好，商品的信息列表也会跟着变化。
在这里插入图片描述
变化成功
在这里插入图片描述
但是有个问题就是我们的“上一页”和“下一页”点击后都没有发生变化，而是一直显示在那里。

所以我们要改变一下，把下面这个disabled去掉。
在这里插入图片描述

我们要用到动态的class去编写，做出判断，如果当前页面等于1的话就是disabled，下面也是同理，当前页面等于最后一页的话就是disabled，然后都添加上点击方法。
在这里插入图片描述

这个是点击“上一页”或者“下一页”后，页面会自动向前或者向后
在这里插入图片描述

Andre_dong
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 利用html实现分页切换效果
qq_51114151的博客
02-08 8337
本篇文章主要要实现的功能效果如下： 包含首页 尾页 上一页 下一页 总计的页数以及总计的条数还有跳转的功能 整体思想：先定位一个中心页 上一页、下一页就是根据定位中心页然后加减就可以实现 首页就是要根据一次要展示几页，然后分别展示要展示的页数 尾页就是根据总共有的页数进行定位，然后分别展示要展示的页数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit..
快速点击，多次请求同一接口，怎样让结果渲染为最后一次请求的结果
weixin_41798613的博客
06-24 3767
如果多次点击请求同一接口，因为请求是异步的，可能会导致结果最后渲染为上一次搜索的结果，那么如何避免这种情况呢？ 第一步：定义一个字段num data() { return { num: 0 }; } 第二步：请求接口事件里 this.num ++; let a = this.num; 然后在接口返回后判断num与a是否相等，若相等，说明是最后一次请求，则进行数据处理。 async getKeywordEmit(val, clear,platform){ this.n
jsp实现上一页下一页翻页功能(示例代码)
01-08
前段时间一直忙于期末考试和找实习，好久没写博客了。 这段时间做了个小项目，包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深，打算玩深后再写篇博客。 要实现翻页功能，只需要设置一个pageIndex即可，然后每次加载页面时通过pageIndex去加载数据就行。 那么我们可以设置一个隐藏的input框，用于传递pageIndex给下个页面。 当我们点击上一页的时候，通过js方法改变pageIndex的值，再提交表单即可 二话不多说，看代码，代码里面写的还算比较清楚。 这个是index.jsp的代码。 index.jsp <%@page import=Bean.D
前端显示分页详解
一枚数学专业的小码农的博客
12-16 3934
分页保姆级详解
el-pagination分页
weixin_58431406的博客
06-17 342
这里用到的是element框架Pagination 分页，设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量。...
前端实现分页
qq_45136544的博客
04-23 8278
前端分页 文章目录前端分页前言一、后台的传入数据二、前端页面准备步骤1.准备一个div2.在上方引入jquery.js文件3.js代码总结 前言 当后台通过写查询得到多条数据时，不在使用数据库分页，直接返回查询的全部数据，在前台直接通过前端js进行分页处理： 一、后台的传入数据 示例： List list = forderService.selectList(); model.addAttribute(“list”, list); 二、前端页面准备步骤 1.准备一个div 在这个div里面会放入一个ta
上一页、下一页功能的实现
小胖lcp的博客
04-29 4609
上一页、下一页的实现
用ElementUI完成新增或修改时上一页下一页前端实现
缘字诀的博客
06-17 1760
1 需求：新增修改项内容要实现分页-上下页注意：很多人找不到内容填充在那，一般需要加一个div 页面展示： 模板示例框架链接 1 需求：新增修改项内容要实现分页-上下页注意：很多人找不到内容填充在那，一般需要加一个div 注意：很多人找不到内容填充在那，一般需要加一个div <div v-if="active==0" class="info">内容一</div> <div v-if="active==2" class="info">内容二</div> &
vue动态渲染svg、添加点击事件的实现
10-15
主要介绍了vue动态渲染svg、添加点击事件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 解决数组赋值无法渲染在页面的问题
10-16
今天小编就为大家分享一篇vue 解决数组赋值无法渲染在页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
上一页下一页分页代码可控制每个页面的字数
11-01
这断代码可以提供给你将文字太多的页面分成多页的分页功能 你可以改变每页显示文字的数目
js实现上一页下一页的效果【附代码】
10-22
下面小编就为大家带来一篇js实现上一页下一页的效果【附代码】。小编觉得非常不错。现在分享给大家。希望能给大家一个参考。
Java趣谈——如何写出一个高效的页面渲染器
01-27
“大雄，想不想再看一个老马之前写的代码？”，一天早上，哆啦来到大雄的卓旁，故作神秘地说。 “哈？好啊，求之不得！” “这次我们来看他写的一个页面渲染器。” “页面渲染器？你是说像谷歌、火狐浏览器那样，将...
Vue在页面数据渲染完成之后的调用方法
10-18
今天小编就为大家分享一篇Vue在页面数据渲染完成之后的调用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
_Wake：新手入门攻略《一》视图与渲染，点击事件
03-29
一：视图与渲染 1.组件使用 组件的使用非常简单，从开发者文档中可直接复制到 wxml 文件中 例： wxml文件： <button type="primary" > 登陆按钮 </button> 2.数据绑定，使用双花括号 {{}} ，在页面实例...
html上一页下一页 jq,jquery 实现分页 前端分页
weixin_39563420的博客
06-09 1323
image.pnghtml ("span.next").click(function(){ //绑定click事件var(this).parents("div.v_show");//根据当前点击元素获取到父元素varparent.find("div.v_content_list"); //寻找到“视频内容展示区域”varparent.find("div.v_content"); //寻找到“...
jquery实现上一页下一页
热门推荐
肖肖肖丽珠的博客
07-07 3万+
简单说一下思路：就是把每个页面都用position：absolute的属性使每个页面都从叠在一起。然后通过$().hide()隐藏和$().show()显示。点击当前页中的下一页，先获取这一页的index索引。然后通过加1，知道下一页的索引，先让所有页面隐藏，再让下一页显示。 总之，获取索引，除了下一页所有页面隐藏，这样思路。   #wizard {ove
上一页，下一页渲染页面
weixin_52714523的博客
01-08 205
##上一页，下一页渲染页面 首先是html： <div id="pageNum"> <button>1</button> <button>1</button> </div> <button onclick="first()">首页</button> <button onclick="perv()">上一页</button>
vue中如果后端返回base64格式的一个图片数组，前端怎么渲染这个数组在页面上
最新发布
07-20
然后，在获取到后端返回的图片数组后，你可以将每个base64格式的图片数据作为数组元素添加到`imageArray`中。 接下来，在模板中使用`v-for`指令遍历`imageArray`，并使用`v-bind`指令将base64格式的图片数据绑定到`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值