react 从商品详情页返回到商品列表页,列表自动滚动上次浏览的位置


现状:目前从商品详情页返回到商品列表页,还需要再去请求服务数据,还需要用户再去等待获取数据的过程,这样用户体验非常不好,

遇到的问题:

1:如何将数据缓存,

2:如何获取和保存列表滑动的高度,

3:判断商品列表页的上一个页面是什么?

如果是从搜索页进到商品列表页的话我们需要清除缓存,获取接口数据,

如果是商品详情页返回到商品列表页的话就用缓存数据,并且滑到到上次浏览的位置。

 一:数据缓存

 使用react全家桶reducers保存数据

1   dispatch({
2      type: types.PRODUCT_LIST,
3      productlist: oldList.concat(data.result),
4      totalPage: data.totalPage,
5      curPage: page,
6      totalCount: data.totalCount
7   });

二:获取和保存列表滑动的高度

 在商品列表页销毁方法里记录滑动高度

1     componentWillUnmount(){
2         var top = $(document).scrollTop();
3         window.sessionStorage.setItem("top",top);
4         window.sessionStorage.setItem("isUseCacheProductList",false);
5         
6     }

 

三:判断商品列表页的上一个页面是什么

在商品详情页离开时劫持路由,判断如果是去商品列表页的话,就设置标识为true。

以下每一步都很关键

商品详情页代码:

import {Router} from 'react-router'
Product.contextTypes = {
    store: React.PropTypes.object,
    router: React.PropTypes.object.isRequired
};
    componentWillMount() {
        /* 发起请求 */
        this.props.actions.initState();
        this.context.router.setRouteLeaveHook(
            this.props.route,
            this.routerWillLeave
        )
    }
  routerWillLeave( nextLocation ){
        console.log("路由跳转---"+ nextLocation.pathname);
        if(nextLocation.pathname == '/product/list'){
        window.sessionStorage.setItem("isUseCacheProductList",true);
        }
  }

 

 在商品列表页获取isUseCacheProductList这个标识,如果为true,说明是商品详情页返回来的,那么久使用缓存数据,

商品列表页代码:

渲染函数里自动滑动到上次浏览位置

render() {
        const {store} = this.context;
        var isUseCache = 
        window.sessionStorage.getItem("isUseCacheProductList");
        var top =  window.sessionStorage.getItem("top");
        if(isUseCache == "true"){
            $("html,body").animate({scrollTop: top + "px"}, 0);
        }
}

 

 这里判断是否需要请求接口数据还是使用缓存数据

componentDidMount() {
        const {store} = this.context;
        var isUseCache = window.sessionStorage.getItem("isUseCacheProductList");
        if(isUseCache != "true"){
            this.props.actions.findProductList("", 1, store.getState().productTodos.pageSize, this.state.categoryId, this.state.keyword, [],isShowInStock,slectString,store.getState().commonTodos.userTypeCode);
        }
       
    }

 

 商品列表页销毁时记录滑动距离,重置 isUseCacheProductList 标识为false。

    componentWillUnmount(){
        //window.addEventListener('scroll', this.handleScroll);
        var top = $(document).scrollTop();
        window.sessionStorage.setItem("top",top);
        window.sessionStorage.setItem("isUseCacheProductList",false);
        console.log("距离顶部距离="+top)
    }

 

 

 

 

打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2022 CODEPRJ.COM