13.热门搜索点击换一换，换页功能的实现

最新推荐文章于 2022-05-23 12:02:19 发布
最新推荐文章于 2022-05-23 12:02:19 发布
阅读量2.7k 收藏 8
点赞数 3
分类专栏： 简书项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuhui2000/article/details/90898947
版权

1.我们可以看到，我们现在页面上将从json中获取到的数据全部显示出来，那我们如何做，才能使每次只显示10个？
在这里插入图片描述2.首先在reducer的默认数据中，我们定义一个当前页和一个总页数,都默认为1：
在这里插入图片描述3.在actionCreators中，我们将从json中获取到的数据分成每10个一页。
在这里插入图片描述5.在reducer中，我们接收数据，并将原来的默认的totalPage替换为刚刚action请求的新的数据的页数
在这里插入图片描述6.在index中，我们引入page
在这里插入图片描述7.这一块将数组10个分为一组，显示在页面
、8.直接使用pagList
在这里插入图片描述在这里插入图片描述10. 现在，我们如果点击换一换，需要实现热门搜索的换页功能

  • 我们首先定义一个鼠标移入的mouseIn,默认是false,也就是鼠标没有移入热门搜索这一块区域

在这里插入图片描述

  • 在index中，我们给Search这一块的元素绑定两个事件，分别是onMouseEnter和onMouseLeave

在这里插入图片描述

  • 将刚刚的两个事件派发给store

最低0.47元/天 解锁文章
zhuhui2000
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
开博第一篇：记一个前端实现的“换一换”功能
weixin_30952535的博客
07-29 853
需求的极简概要：实现“换一换”按钮的功能，点击之后，换另一批对应的品牌 刚开始的时候考虑使用ajax请求数据，之后通过js在页面上填充到指定位置，但是真是懒得给这个ajax请求单独再配一个请求映射了，干脆直接在后台把需要的内容全部拼成JSON字符串，直接在前台解析，分页。 页面比较简单，就不上html代码了，大概思路就是：两个“换一换”按钮分别对应两套数据，共用一个分页的方法，分别传...
点击“换一换”切换商品，使用jquery slice()实现无缝连接切换
qq_35904642的博客
01-04 3158
页面需求需要做一个点击换一换按钮，切换商品信息。网上看了一些笨方法，觉得太冗余。自己写了一个精简版的如下： html部分 <div class="layer clearfix qiang_inner"> <ul> <li> item111</li&a
实现百度的换一换（一）
weixin_30755709的博客
02-22 1199
*{ margin: 0; padding: 0; } #maxbox{ width: 405px; height: 400px; margin: 0 auto; } /* 这是标题部分 */ #maxbox .chang...
换一批功能的实现jquery
05-19
获取数据源以后，利用jquery实现每次点击切换不同的展示内容，知道数据全部展示之后，再重新开始刷新抓取
VUE:在VUE中实现效果"换一换"功能
勤勇的博客
04-30 3606
实现效果：假如有10条数据，分组展示，默认在当前页面展示4个，点击换一批，从第5个开始继续展示，到最后一组，再重新返回到第一组 data() { return { qList: [], //处理后的list newList: [], //截取第几组的开始参数 timeStart: 0, //截取第几组...
【VUE系列】实现随机换一换功能
IU
06-03 779
如图所示，需要实现点击换一换,随机切换列表 实现 定义 showActive:[0,1,2,3], //储存需要渲染的索引 list:[], //后台返回的数据列表 JS replace(){ var a = []; var j= 0; while(j<4){ var b = Math.floor((Math.random()*this.showData.activity_list.length));
ECSHOP全部品牌页实现分页换页功能方法
09-28
在ECSHOP电商平台系统中，实现“全部品牌页”的分页换页功能是一项重要的优化措施，特别是对于拥有大量商品品牌的店铺来说，这能够提升用户体验，让用户更方便地浏览和查找所需品牌。以下是对ECSHOP全部品牌页实现...
应用PageHelper实现大屏中table形式自动换页展示.pdf
01-13
这里提到了两个CSS文件和一个JavaScript文件，分别是`jquery.dataTables.css`和`bootstrap.css`用于美化表格展示，以及`jquery.dataTables.js`作为jQuery的DataTables插件，它提供了强大的表格处理功能，包括分页、...
ff.rar_页式虚存管理_页面置换
09-22
页式虚存管理是操作系统内存管理的一种重要策略，它允许程序使用比实际物理内存更大的地址空间，通过将不常使用的部分数据存储到硬盘上的“交换区”（也称为虚拟内存），并在需要时再将这些数据调入内存。...
手机换页功能实现源代码
05-06
本文将深入探讨如何实现手机换页功能，并结合"NewsList"这一文件名，推测这是一个关于新闻列表滚动或分页显示的示例代码。 首先，我们来了解手机换页功能的基本原理。通常，这种功能是通过滑动屏幕或者点击分页控件...
jQuery点击按钮图片换一换效果代码.zip
07-04
jQuery点击按钮图片换一换效果代码是一款鼠标点击按钮新闻图片换一换效果代码。
点击搜索框弹出热门搜索以及点击缓一缓 实现换一批热门关键词的实现思路以及代码 .zip
12-20
点击搜索框弹出热门搜索 以及点击缓一缓 实现换一批热门关键词的实现思路以及代码 。如有不明可留言咨询。
jQuery手机端标签换一换代码.zip
07-11
jQuery手机端标签换一换代码是一款通过jQuery获取多组li标签，通过点击换一换按钮，换一批标签效果代码。 var changeindex=1; var clickindex=2; $(".changeone li").each(function(index,element){       if(index/8<changeindex){ element.className="change" changeindex; }else{ changeindex ; element.className="change" changeindex; } }) $(".change1").siblings().css("display","none"); $(".change1").show(); $(".huan").click(function(){ if(clickindex<=changeindex){ $(".change" clickindex).siblings().css("display","none"); $(".change" clickindex).show(); clickindex ; }else{ clickindex=1; $(".change" clickindex).siblings().css("display","none"); $(".change" clickindex).show(); } });
vbpageprint.rar_vb打印机换页
07-14
Vb换页打印，显示当前是第几页，然后让用户确定是否打印，一个分页打印的例子。测试截图所显示的是我本机测试，没装打印机，没看到最终效果。不过VB程序可以直接编译成功。
js实现列表换一换（如招聘网站职位的换一换）
motian06的专栏
09-21 6425
后端数据 后端传递一个职位的数组，假定数组长度100   前端处理 循环这个数组 普通循环 列表长度100   添加js $('tr').slice(0, 5).show() //默认显示长度5$('a.change').click(function(){ $('tr').slice(5, 10).show(); $('tr').slice(0, 5).hide().app
完全有JS完成百度换一换
m0_63922807的博客
12-01 1142
css div{ overflow: hidden; width: 600px; margin: 80px auto 10px; } span{ float: left; } p{ float: right; } p>img{ width: 15px; he
vue 换一换功能
qq_42949209的博客
12-09 1214
大家自己去百度上看一下他们的换一换功能，就能明白是什么意思啦 在普通一点的说，换一换功能与分页功能一致，以百度首页为例，当前页面为1，当前页面的数据为6，当前数据为1-6，在点击换一换之后，数据会变成7-12，那这个是如何实现的呢，原理就在于每点击一次换一换的时候，当前所在页面+1，即在查询时查询第二页的6个数据，就变相的达到了分页的效果了，然而我们多点几次，发现在数据为30之后，再点击换一换，数据又回来了，这里的话就需要加一个限制，当当前的页数为5时，将当前页面数重新赋值为1，这样数据就可以轮着换啦..
百度首页新闻切换效果-分页功能实现
Victoria_jones的博客
05-23 308
简单的分页功能实现，以百度首页新闻为例
Vue音乐--搜索页面03_热门搜索组件
kingAn123的博客
10-10 1098
大概步骤： 目标效果 三、新建热门搜索关键词组件的数据获取和布局 要点： QQ音乐移动端网页抓取热门搜索的关键词数据 截取关键词数据数组的前10个 对数据列表布局为圆角边框样式 点击热门搜索关键词，关联到输入框中 （一）抓取热门搜索关键词数据 ↓ api - -&gt;search.js import jsonp from '@/common/js/jsonp' //引入...
html实现换页（上一页，页码，下一页）
最新发布
05-31
要实现换页的功能，需要用到HTML、CSS和JavaScript。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页示例</title> <style> .pagination { display: inline-block; margin: 20px 0; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; border: 1px solid #ddd; margin: 0 4px; } .pagination a.active { background-color: #4CAF50; color: white; } .pagination a:hover:not(.active) { background-color: #ddd; } </style> </head> <body> <div class="pagination"> <a href="#">«</a> <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">»</a> </div> <script> var current_page = 1; // 当前页码 var total_pages = 5; // 总页数 // 上一页的点击事件 document.querySelector('.pagination a:first-child').addEventListener('click', function(e) { e.preventDefault(); if (current_page > 1) { current_page--; updatePagination(); } }); // 下一页的点击事件 document.querySelector('.pagination a:last-child').addEventListener('click', function(e) { e.preventDefault(); if (current_page < total_pages) { current_page++; updatePagination(); } }); // 页码的点击事件 document.querySelectorAll('.pagination a:not(:first-child):not(:last-child)').forEach(function(el) { el.addEventListener('click', function(e) { e.preventDefault(); current_page = parseInt(this.textContent); updatePagination(); }); }); // 更新分页 function updatePagination() { document.querySelectorAll('.pagination a').forEach(function(el) { el.classList.remove('active'); if (parseInt(el.textContent) === current_page) { el.classList.add('active'); } }); } </script> </body> </html> ``` 在这个示例中，我们使用了一个`<div>`元素来包含分页的链接，每个链接表示一个页码或上一页/下一页。我们使用CSS来设置链接的样式，包括颜色、边框、间距等。我们使用JavaScript来处理链接的点击事件，并根据当前页码和总页数来更新分页链接的状态。可以根据需要修改上述代码来实现更复杂的分页效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值