频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
react页面点击加载更多
2018-08-08 16:57:48      个评论      
收藏   我要投稿

一般对于加载更多有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{item.username}

{likes.length}

{comments.length}

{item.city}

{item.scenicspot}

{item.title}

{item.content}

{

pics.map(function (pic) {

return

})

}

}else{

return

{item.username}

{likes.length}

{comments.length}

{item.city}

{item.scenicspot}

{item.title}

{item.content}

}

});

return (

随手游记

 

写游记

{TravelNodeslist}

    {this.state.isLoadingMore}

    )

    }

    }

    export default TravelNodes;


    点击复制链接 与好友分享!回本站首页
    上一篇:vue格式化时间戳解析
    下一篇:HTTP之断点续传教程
    相关文章
    图文推荐

    关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

    版权所有: 红黑联盟--致力于做实用的IT技术学习网站