移动端下滑加载,记录原滚动位置,跳到详情页返回保留数据。

移动端下滑加载,记录原滚动位置,跳到详情页返回保留数据。

使用sessionStorage 方法
sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

	var pagesize=15;//每页数据条数
    var loading = false;  //状态标记
    var page = 1;
    var maxpage;

    function ajaxpage(page){
        $.ajax({
            type:"post",
            url:'../php/page.php',
            data: {"page":page,"pagesize":pagesize,ajax:2},
            dataType:'json',
            timeout:10000,
            beforeSend:function(xhr){
                $('.weui-loadmore').show();
            },
            success:function(rs){
                $('.weui-loadmore').hide();
                $("#rank-list").append(tpl(document.getElementById('tpl').innerHTML,rs));

                var maxpage = Math.ceil(rs.total / pagesize); //总数除以每页的页数
                sessionStorage['maxpage'] = maxpage;

                if(page==maxpage){
                    $(document.body).destroyInfinite();
                    $('.weui-loadmore').show().html("没有更多数据了");
                }
            },
            error:function(xhr){
                alert('ajax出错');
            },
        });
    }
		//下滑加载 
        $(document.body).infinite().on("infinite", function() {
            if(loading) return;
            loading = true;
            setTimeout(function() {
                maxpage = sessionStorage['maxpage'];
                if(page<maxpage) {
                    page++;
                    ajaxpage(page);、
                }
                loading = false;
            }, 1500);   //模拟延迟
        });
        //一进入界面就进行判断，如果l为null或者空的时候就会执行ajax，并加载第一页的数据，如果不会空就会读取sessionStorage的数据
        var l = sessionStorage.getItem('index_list');
        if(null !== l && '' !== l){  
            $("#rank-list").html(l);
            $(window).scrollTop(sessionStorage.getItem('index_scroll'));//getItem读取上次存的页面位置
            page = sessionStorage.getItem('index_page');
            //清空存储的列表数据、存储页码、存储滚动条位置
            sessionStorage.removeItem('index_list');
            sessionStorage.removeItem('index_page');
            sessionStorage.removeItem('index_scroll');
        }else{
            ajaxpage(1);
        }
    });
    const goto=(id)=>{  //es6箭头函数  当点击列表查看详情的时候就会将列表数据和页码、滚动条位置都存储下来
        sessionStorage.setItem('index_list',$("#rank-list").html());//存储列表数据
        sessionStorage.setItem('index_page',page);//存储页码
        sessionStorage.setItem('index_scroll',$(window).scrollTop());//存储滚动条位置
        location.href="js91.html?id="+id;
    }

参考网址 https://weui.shanliwawa.top/demo/js15.html