react上拉加载+详情页返回记录位置(session)

接上篇上拉加载。。。
思路····
比如现在有A页面(进入列表的页面),列表页面详情页面
1、在A页面(或者其他进入列表的页面),在跳转路由进列表页面的时候在session中存储一个值(“isGoBack”),用来判定是否是返回的页面(如果是返回的页面就不请求接口,直接拿session中存储的数据)

goStudy(){
        sessionStorage.setItem("isGoBack",0);//0:不是返回的页面  1:是返回的页面
        this.props.history.push("/train-course")
    }

2、在列表页进入详情页的时候,存储三个元素(当前请求数据页数,列表数据,滚动条的位置)

//进入详情页
    gotoDetial(){
        //存储数据
        const listInfo = {
            pIndex:this.state.getDataConfig.pIndex,
            courseData:this.state.courseData,
            scorllTop:document.getElementById("train-course").scrollTop
        }
        sessionStorage.setItem("listInfo",JSON.stringify(listInfo))
        this.props.history.push("/train-learn/3")

    }

3、在“列表页“组件渲染完成后(componentDidMount)判断”isGoBack“,是否是返回的页面,”
是:将第二步存储的数据更新到相应的state中
否:直接调取接口获取数据

componentDidMount() {
        //session:"isGoback"  0:不是返回的页面   1:是返回的页面
        // 获取当前滚动条的位置,并且设置滚动条的值和数据
        let isGoback = sessionStorage.getItem("isGoBack");
        if(isGoback==="1"){//返回回来的页面
            let listInfo = JSON.parse(sessionStorage.getItem('listInfo'));
            console.log(listInfo)
            this.setState({
                getDataConfig: Object.assign({}, this.state.getDataConfig, {
                    pIndex:listInfo.pIndex
                }),
                courseData:listInfo.courseData
            },()=>document.getElementById("train-course").scrollTop=listInfo.scorllTop)//指定元素内的滚动条位置,如果是文档可参考用window.scorllTo(x[Number],y[Number])
        }else {//从其他页面进入的列表页
            this.getData();
        }
        document.getElementById("train-course").addEventListener('scroll', () => this.watchOnscroll());//给元素添加滚动监听
    }

4、在详情页面组件将卸载的时候(componentWillUnmount)设置”isGoBack“的类型:

componentWillUnmount(){
        sessionStorage.setItem("isGoBack",1)
    }

看过来、、、看过来、、demo在这里!

你可能感兴趣的:(react上拉加载+详情页返回记录位置(session))