当前位置: 首页>前端>正文

NestedScrollView加载更多 可以加载更多内容

1.我们将实现加载更多内容放在List这一部分,首先,在list中新定义一个标签LoadMore

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_List,第1张

2.然后我们需要从style文件中引入。

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_List_02,第2张

3.在style文件中,我们去定义这个元素的样式

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_json_03,第3张

4.然后效果就出来了

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_List_04,第4张

5.如何实现点击更多文字,出来更多的推荐文字呢

  1. 我们首先给LoadMore绑定一个单击响应事件getMoreList
  2. 然后我们使用mapDispatch派发请求,将getListMore定义在这里面,通过其派发

    3.将获取到的getListMore传递给我们现在本文件中的getListMore
    4.我们将具体的派流程到actionCreators中去完成,因为是获取异步数据,我们需要用到ajax

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_数据_05,第5张

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_json_06,第6张

5.然后我们需要在public–>api–>下面新建一个文件homeList.json,把我们需要的数据存放在这里面

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_List_07,第7张

6.在actionTypes中,我们需要增加ADD_ARTICLE_LIST

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_数据_08,第8张

7.发送请求之后,我们需要在reducer中处理数据

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_List_09,第9张

8.在List中接收数据:

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_json_10,第10张

9.然后就ok了。

10.但是这时控制台报了一个错误

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_数据_11,第11张

11.其实在开发中,我们点击一次更多文字,实际上上显示数据的后一页,将数据进行分页

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_数据_12,第12张

12.在list中去接收到store中的articlePage

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_List_13,第13张

13.然后我们将点击事件的getLiistMore定义成一个箭头函数,并将page传递进来

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_数据_14,第14张

14.将拿到的page绑定给我们本页的page

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_json_15,第15张

15.getMoreList接收到page页码,并传递给actionCreators

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_数据_16,第16张

16在actionCreators中,我们可以接收到page并将其跟json绑定

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_数据_17,第17张

去控制台看下效果:

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_json_18,第18张

17.我们可以将page+1传递给addHomeList

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_数据_19,第19张

18.在actionCreators中的addHomeList中,我们定义一个nextPage,并将其也派发出去这里的nextPage其实就是指pa

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_List_20,第20张

19.在reducer中,我们接收并处理数据,把nextPage传递进来,

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_json_21,第21张

20.点击更多文字:

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_List_22,第22张

21.此时,我们点击更多文字时,控制台报关于key值的错误

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_List_23,第23张

只需要将key值设置成index

NestedScrollView加载更多 可以加载更多内容,NestedScrollView加载更多 可以加载更多内容_数据_24,第24张



https://www.xamrdz.com/web/2mt1928868.html

相关文章: