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

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

在这里插入图片描述

  • 因为使用了actionCreators,所以我们需要在actionCreators定义mouseEnter和mouseLeave

在这里插入图片描述

  • 然后在actionTypes中添加

在这里插入图片描述

  • 数据交给reducer处理:如果鼠标移入就将mouseIn改成true,如果移出改为false

在这里插入图片描述

  • 在index中我们接收mouseIn
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值