专栏首页技术探索详情页返回到列表页定位处理

详情页返回到列表页定位处理

1.背景

在H5页面的电商系统中往往会有以下需求: 点击分类等跳转到商品列表页,点击某个商品之后再返回到列表页,返回列表页面的时候能记住之前浏览的位置:

2.方案:

我们需要哪些数据?

  • 当前页数
  • 当前已经加载的数据
  • 当前滚动的高度

2.1 cookies和localstorage

  • 在页面滚动的过程中将滚动的距离和当前页数记录下来(也有设置锚点的)。
  • 加载新数据的时候将页面的数据及当前页数记录下来。
  • 将上面三个数据存储到浏览器缓存中,并设计过期时间。
  • 从商品详情页回到列表页面的时候,判断是否是从详情页返回的(可以根据 window.location.hash判断)。如果是从详情页返回的,将数据加载到html页面。
  • 缓存过期后,清除缓存。

这个方案有2个弊端

  • 浏览器必须支持 localstorage(主流的基本上都支持了)
  • 缓存失效时间,如果处理不当可能造成数据混乱

2.2 html5的replaceState

history.pushState() 和 history.replaceState() 是什么有兴趣的可以到网上查下

  • 创建一个对象用于存储需要的信息
  • 在页面滚动的过程中将当前滚动的距离记录下来。
  • 加载新数据的时候替换老的数据。
  • 点击进入商品详情页之前将当前页数、数据、滚动距离更新到对象中。
  • 从商品详情页回到列表页面的时候,$(window).load()判断是否有数据,有就从对象中取,否则ajax请求
  • window.history.replaceState({}, “”, page); 清空数据

总上所述,个人比较推荐方案2 现贴上方案2的部分代码,仅供参考

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() - $(document).height() >= -1) {
        if (!scrolling) {
            curPage++;
            showLoading();
            setTimeout(function() {
                getList(10);
            }, 3000);
        }
    }
});
$(window).load(function() {
    //判断如果有history.state.data,说明是从详情页返回的
    if (!!(window.history.state && window.history.state.data)) {
        $("#loading").hide();
        $("#nomore").hide();
        $("#loadmore").show(); //隐藏loading,显示 加载更多(为了分页)
        dealWithResult(window.history.state); //根据记录的数据显示列表
        curPage = window.history.state.curPage;
        statedata = window.history.state; //把页面和data赋值给全局变量
        window.history.replaceState({}, "", "list.html"); //清空state,防止列表页点返回的时候会回到上一个state

    } else {
        getList(20); 

    }
});



function dealWithResult(listdata) {
    $("#list").html(listdata.data)
        //判断如果是详情页回来,获取上次的滚动条位置
    if (!!(window.history.state && window.history.state.data)) {
        // 延迟 0.5秒滚动,防止页面中列表还没构建完
        setTimeout(window.scroll(0, window.history.state.sh || 0), 500);
    }
}

var totalnum = 0;
var statedata = {};

var curPage = 1;

function getList(num) {

    var li = '';
    for (i = totalnum; i < totalnum + num; i++) {
        li += '<li class="goodsDetail"><a href="javascript:void(0);">list' + (i + 1) + '</a></li>';
    }
    totalnum += num
    $("#list").append(li);
    statedata.data = $("#list").html();

    hideLoading();
}

function showLoading() {
    scrolling = true;
    $("#loading").show();
}

function hideLoading() {
    scrolling = false;
    $("#loading").hide();
}

$("#list").on('click', ".goodsDetail", function() {
    //所有数据
    var data = $("#list").html();
    statedata.curPage = curPage
    statedata.data = data
    statedata.sh = scroll2Top();
    var hrefPage = "detail.html";
    history.replaceState(statedata, "", "list.html");
    window.location.href = hrefPage;
});
//当前滚动条位置
function scroll2Top() {
    var scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
    } else if (document.body) {
        scrollTop = document.body.scrollTop;
    }
    return scrollTop;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一次线上数据库添加字段造成磁盘不够的问题

    公司使用的是MySQL数据库,随着业务和用户的增加有张表的数据达到了150000000(1亿5千万)条左右,其中好几个功能都会对这张表进行增删改操作。在并发量比...

    日薪月亿
  • 微服务扩展性和高可用-集群(翻译)

    集群是一组计算机系统,它们协同工作以形成用户作为单个系统的形式。部署集群是为了提高服务可用性或提高计算或数据操作性能。就等效计算能力而言,集群比具有相同性能特征...

    日薪月亿
  • Spring AOP中pointcut expression表达式解析 及匹配多个条件

    任意公共方法的执行:   execution(public (..)) 任何一个以“set”开始的方法的执行:   execution( set(..)) A...

    日薪月亿
  • 在服务器上排除问题的头 5 分钟

    我们团队为上一家公司承担运维、优化和扩展工作的时候,我们碰到了各种不同规模的性能很差的系统和基础设备(大型系统居多,比如CNN或者世界银行的系统)。

    良月柒
  • 在服务器上排除问题的头五分钟(干货)

    遇到服务器故障,问题出现的原因很少可以一下就想到。我们基本上都会从以下步骤入手: 一、尽可能搞清楚问题的前因后果 不要一下子就扎到服务器前面,你需要先搞明白对这...

    小小科
  • 50. Python 数据处理(1)

    逗号分隔符(csv),有时也称为字符分隔值,因为分隔字符也可以不是逗号,其文件以纯文本的形式存储表格数据(数字和文本)。

    py3study
  • TypeScript 实战算法系列(十):实现动态规划

    前面的一系列文章跟大家分享了各种数据结构和算法的实现,本文将分享一些算法的设计技巧:分而治之、动态规划,使用这些技巧可以借算法来解决问题,提升自己解决问题的能力...

    一只图雀
  • 图穷匕见:K近邻算法与手写数字识别

    机器学习算法是从数据中产生模型,也就是进行学习的算法。我们把经验提供给算法,它就能够根据经验数据产生模型。在面对新的情况时,模型就会为我们提供判断(预测)结果。...

    用户1682855
  • 编程,计算机组成

    是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧,用来向计算机发出指令。(来自百度百科对于编程语言的诠释)

    小小咸鱼YwY
  • 既得利益者的灭顶之灾:当数字货币结合证券...

    区块链大本营

扫码关注云+社区

领取腾讯云代金券