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
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/zhuhui2000/article/details/91410707
21.