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
-
{
pics.map(function (pic) {
return
})
}
}else{
return
}
});
return (
随手游记
写游记
{TravelNodeslist}
{this.state.isLoadingMore}
)
}
}
export default TravelNodes;