当前位置： 移动技术网 > IT编程>网页制作>CSS > react页面点击加载更多

react页面点击加载更多

2018年08月04日  | 移动技术网IT编程  | 我要评论

一般对于加载更多有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

}else{

return

}

});

return (

随手游记

 

写游记

{TravelNodeslist}

    {this.state.isLoadingMore}

    )

    }

    }

    export default TravelNodes;

    您可能感兴趣的文章:

    如对本文有疑问， 点击进行留言回复！！

    相关文章:

    验证码：
    最近更新的文章
    大家感兴趣的文章
    移动技术网