21.实现加载更多内容

1.我们将实现加载更多内容放在List这一部分,首先,在list中新定义一个标签LoadMore
在这里插入图片描述2.然后我们需要从style文件中引入。
在这里插入图片描述3.在style文件中,我们去定义这个元素的样式
在这里插入图片描述4.然后效果就出来了
在这里插入图片描述5.如何实现点击更多文字,出来更多的推荐文字呢

  1. 我们首先给LoadMore绑定一个单击响应事件getMoreList
    在这里插入图片描述
  2. 然后我们使用mapDispatch派发请求,将getListMore定义在这里面,通过其派发
    在这里插入图片描述在这里插入图片描述
    3.将获取到的getListMore传递给我们现在本文件中的getListMore
    在这里插入图片描述4.我们将具体的派流程到actionCreators中去完成,因为是获取异步数据,我们需要用到ajax
    在这里插入图片描述

在这里插入图片描述在这里插入图片描述5.然后我们需要在public–>api–>下面新建一个文件homeList.json,把我们需要的数据存放在这里面
在这里插入图片描述6.在actionTypes中,我们需要增加ADD_ARTICLE_LIST
在这里插入图片描述7.发送请求之后,我们需要在reducer中处理数据

在这里插入图片描述8.在List中接收数据:
在这里插入图片描述9.然后就ok了。
10.但是这时控制台报了一个错误
在这里插入图片描述11.其实在开发中,我们点击一次更多文字,实际上上显示数据的后一页,将数据进行分页
在这里插入图片描述12.在list中去接收到store中的articlePage
在这里插入图片描述13.然后我们将点击事件的getLiistMore定义成一个箭头函数,并将page传递进来
在这里插入图片描述
14.将拿到的page绑定给我们本页的page
在这里插入图片描述15.getMoreList接收到page页码,并传递给actionCreators
在这里插入图片描述16在actionCreators中,我们可以接收到page并将其跟json绑定
在这里插入图片描述去控制台看下效果:
在这里插入图片描述
17.我们可以将page+1传递给addHomeList
在这里插入图片描述18.在actionCreators中的addHomeList中,我们定义一个nextPage,并将其也派发出去这里的nextPage其实就是指pa
在这里插入图片描述19.在reducer中,我们接收并处理数据,把nextPage传递进来,
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019061108064492.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubm20.点击更多文字:
在这里插入图片描述21.此时,我们点击更多文字时,控制台报关于key值的错误
在这里插入图片描述只需要将key值设置成index
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值