react 页面点击加载更多

一般对于加载更多有2中做法

1.一次性从服务端拿到所有数据，然后分页显示；

2.分批次从服务器加载数据；

优缺点：第一种对于更进入页面时加载时间过长，体验不是太好。当然，当数据加载完毕后，后面的操作就比较流畅了；

第二种：相对来说比较好一点，需要多少数据加载多少数据，减少了不必要的网络开销，为用户节省流量，推荐！

本篇文章使用的第二种方式，模拟服务端分批加载数据，下面是整个页面的代码：需要的朋友可以修改后使用，可转载，但请注明出处，谢谢了！

import React, { Component } from 'react';

import "./Header.css";

import "./TravelNodes.css";

import titlebg from "./images/bg01.png";

import {Link} from "react-router-dom";

import TitleBar from "./TitleBar";

import avart from "./images/avart.png";

import example from "./images/example.png";

import like from "./images/like.png";

import comment from "./images/comment.png";

import position from "./images/position.png";

import inputIcon from "./images/input-icon.png";

let counter = 0; /*计数器*/

let pageStart = 0; /*offset*/

let pageSize = 10; /*size*/

var blogjson = {

"list": [

{id:1, username:"逛逛六111",userpic:[example,avart,avart,avart,avart],like:[{},{},{}],comment:[{},{},{},{}],title:"滴答滴答滴答滴答的房贷首付",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"重庆",scenicspot:"洪崖洞"},

{id:2, username:"非官方多个2222",userpic:[example],like:[{},{},{}],comment:[{},{},{},{}],title:"方法和经济结构哈斯",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"陕西西安",scenicspot:"大雁塔"},

{id:3, username:"fdf3333",userpic:[avart,avart],like:[{},{},{}],comment:[{},{},{},{}],title:"日退热贴热退热贴二人仍然",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"重庆",scenicspot:"洪崖洞"},

{id:4, username:"方法444",userpic:[example],like:[{},{},{}],comment:[{},{},{},{}],title:"叫姐姐热饿ddddddddddddddddddddddddddd",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"重庆",scenicspot:"洪崖洞"},

{id:5, username:"医院555",userpic:[],like:[{},{},{}],comment:[{},{},{},{}],title:"哈哈哈黄金回购计划",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"泰国",scenicspot:"泰姬陵"},

{id:6, username:"和关键环节666",userpic:[example,avart,avart,avart],like:[{},{},{}],comment:[{},{},{},{}],title:"滴答滴答滴答滴答的房贷首付",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"重庆",scenicspot:"洪崖洞"},

{id:7, username:"方法法7777",userpic:[example],like:[{},{},{}],comment:[{},{},{},{}],title:"gggfdfgdfgd",city:"重庆",content:"但是发的三房的三房岁非的房贷首付多少分第三方",scenicspot:"洪崖洞"},

{id:8, username:"逛逛六88888",userpic:[example,avart,avart],like:[{},{},{}],comment:[{},{},{},{}],title:"滴答滴答滴答滴答的房贷首付",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"重庆",scenicspot:"洪崖洞"},

{id:9, username:"逛逛六111",userpic:[example,avart,avart,avart],like:[{},{},{}],comment:[{},{},{},{}],title:"滴答滴答滴答滴答的房贷首付",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"重庆",scenicspot:"洪崖洞"},

{id:10, username:"非官方多个2222",userpic:[],like:[{},{},{}],comment:[{},{},{},{}],title:"方法和经济结构哈斯",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"重庆",scenicspot:"洪崖洞"},

{id:11, username:"fdf3333",userpic:[avart,avart,avart,avart],like:[{},{},{}],comment:[{},{},{},{}],title:"日退热贴热退热贴二人仍然",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"重庆",scenicspot:"洪崖洞"},

{id:12, username:"方法444",userpic:[example],like:[{},{},{}],comment:[{},{},{},{}],title:"叫姐姐热饿ddddddddddddddddddddddddddd",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"重庆",scenicspot:"洪崖洞"},

{id:13, username:"医院555",userpic:[avart],like:[{},{},{}],comment:[{},{},{},{}],title:"哈哈哈黄金回购计划",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"重庆",scenicspot:"洪崖洞"},

{id:14, username:"和关键环节666",userpic:[example,avart,avart,avart],like:[{},{},{}],comment:[{},{},{},{}],title:"滴答滴答滴答滴答的房贷首付",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"重庆",scenicspot:"洪崖洞"},

{id:15, username:"方法法7777",userpic:[example],like:[{},{},{}],comment:[{},{},{},{}],title:"gggfdfgdfgd",city:"重庆",content:"但是发的三房的三房岁非的房贷首付多少分第三方",scenicspot:"洪崖洞"},

{id:16, username:"逛逛六88888",userpic:[example,avart,avart,avart],like:[{},{},{}],comment:[{},{},{},{}],title:"滴答滴答滴答滴答的房贷首付",content:"但是发的三房的三房岁非的房贷首付多少分第三方",city:"重庆",scenicspot:"洪崖洞"},

]

}

class TravelNodes extends Component {

constructor(props){

super(props);

this.state = {

data: [],

isLoadingMore: "点击加载更多",

};

}

TravelNodesDetail(userId) {

var self = this;

self.props.history.push({pathname:'./DetailA',query:{from:"TravelNodes",userId: userId}});

}

getMoreData=()=>{

counter++;

pageStart = counter * pageSize;

this.getData(pageStart, pageSize);

}

getData=(offset,size)=>{

var webdata = blogjson.list;

var sum = blogjson.list.length;

var dempArr=[];

if (sum - offset < size) {

size = sum - offset;

}

for (var i = offset; i < (offset + size); i++) {

dempArr.push(webdata[i]);

}

this.setState({

data: this.state.data.concat(dempArr)

})

if ( (offset + size) >= sum){

this.setState({

isLoadingMore: "没有更多了"

})

}else{

this.setState({

isLoadingMore: "点击加载更多"

})

}

componentDidMount() {

console.log("===",pageStart)

console.log("+++",pageSize)

this.getData(pageStart, pageSize);

}

componentWillUnmount(){

counter = 0; /*计数器*/

pageStart = 0; /*offset*/

pageSize = 10; /*size*/

console.log("componentWillUnmount")

}

render() {

var _this = this;

const TravelNodeslist = this.state.data.map(function (item, index) {

var pics = item.userpic;

var piclen = pics.length;

var likes = item.like;

var comments = item.comment;

if(piclen > 0){

return <li key={item.id} onClick={_this.TravelNodesDetail.bind(_this,item.id)}>

<span className="nick"><a className="nick-a">{item.username}</a></span>

<a className="like-a"><img src={like}/><span className="ssj-type-name">{likes.length}</span></a>

<a className="comment-a"><img src={comment}/><span className="ssj-type-name">{comments.length}</span></a>

<a className="scenery-a"><span className="ssj-type-name">{item.scenicspot}</span></a>

</span>

</div>

<div className="suishoupai-title"><a>{item.title}</a></div>

<div className="suishoupai-pic-introduce"><a>{item.content}</a></div>

{

pics.map(function (pic) {

return <span><a className="suishoupai-pic-a"><img src={pic}/></a></span>

})

}

</div>

</li>

}else{

return <li key={item.id} onClick={_this.TravelNodesDetail.bind(_this,item.id)}>

<span className="nick"><a className="nick-a">{item.username}</a></span>

<a className="like-a"><img src={like}/><span className="ssj-type-name">{likes.length}</span></a>

<a className="comment-a"><img src={comment}/><span className="ssj-type-name">{comments.length}</span></a>

<a className="scenery-a"><span className="ssj-type-name">{item.scenicspot}</span></a>

</span>

</div>

<h2 className="suishoupai-title"><a>{item.title}</a></h2>

<div className="suishoupai-pic-introduce" title={item.content}><a>{item.content}</a></div>

</li>

}

});

return (

</a>

</div>

</div>

</div>

<ul>

{TravelNodeslist}

</ul>

<div onClick={this.getMoreData.bind(this)}>{this.state.isLoadingMore}</div>

</div>

)

}

export default TravelNodes;

react 页面点击加载更多

猜你喜欢