根据客户反馈，最近遇到一个用户体验不是很好的问题，就是用户在列表页翻页浏览 了很多商品，点击某一个商品跳到详情页，然后返回，但是不是用户刚才浏览的哪个位置了，需要重头开始继续浏览，商品特别多的话体验就不是很好。
需求：实现当在第N页的列表页，点击ID=Num的商品详情页，跳转到详情页后，再点击返回按钮，依旧返回到列表第N页，并显式的改变ID=Num商品的查看状态（我这里是手机端，属于下拉加载的那种）
解决思路：利用seesionStorage和scrollTop
在列表页中将请求服务端接口返回的列表信息使用一个对象dataList存储起来，并记录当前的页码pageCurret，当点击跳转某个商品详情页之前，将dataList与pageCurret存储进sessionStorage中，当第二次返回到列表页后，先去sessionStorage中寻址，看能不能找到缓存的列表信息，如果存在，就直接使用缓存中的dataList填充列表页，同时清除seesionStorage中的listData缓存，并且利用window.scroll跳到之前浏览的位置，如果不存在，就请求服务端接口填充列表
代码如下：
var scrollTop = 0; //滚动条位置
var pageCurrent = 0;//页码
var historyData = [];//存储列表所有加载完的数据
var numID = '';//某个商品的id
var listData = {};
$(function() {
var page = 1;
var rows = 4;
var $panel = $("ul[myorder]");
var loading = false;
var $loading = $("[myloading]");
var getData = function(pageCurrt) {
if (loading) {
return;
}
loading = true;
$loading.show();
//查询条件
var data = {};
data["page"] = pageCurrt ? pageCurrt : page; //当前页码
data["rows"] = rows; //当前查询数量
data["keyword"] = "{:input('param.keyword')}"; //搜索
data["cate_id"] = "{:input('param.cid')}"; //客户id
data["order"] = ''
//销量
var xl = Number($("[xl]").attr("xl"));
switch (xl) {
case 0:
break;
case 1:
data["order"] += ",sales asc";
break;
case 2:
data["order"] += ",sales desc";
break;
default:
alert('default')
}
//价格
var chejia = Number($("[chejia]").attr("chejia"));
// console.log(chejia)
switch (chejia) {
case 0:
break;
case 1:
data["order"] += ",price asc";
break;
case 2:
data["order"] += ",price desc";
break;
default:
alert('default')
}
pageIndex = data.page;
$.ajax({
type: 'Post',
url: "{:url('/Goods/Lists')}",
dataType: 'json',
cache: false,
data: data,
success: function(data) {
historyData = historyData.concat(data.rows);
// for (var i = 0; i < data.rows.length; i++) {
// historyData.push({
// data: data.rows[i]
// });
// }
if (data.rows.length > 0) {
$panel.append(template('mycontents', {
list: data.rows,
pages: parseInt(data.page)
}));
// $(".ts").show();
// $(".ts").html("已为您找到" + data.count + "款新车");
} else {
var html = '<div class="qsy">\n' +
' <img src="__STYLE__/img/img22.jpg" alt="">\n' +
' <span>暂无数据</span>\n' +
' <a href="/Index/index">返回首页</a>\n' +
' </div>'
$panel.append(html);
$("[data-more]").hide();
$(".ts").hide();
}
//判断条数 来确定是否显示下一页按钮
if (rows * page < data.count) {
$("[data-more]").show();
page = page + 1;
} else {
page = -1;
$("[data-more]").hide();
if (data.count > 20) {
$loading1.show();
}
}
/*}*/
},
error: function(data) {
//layer.open('网络异常，请稍后重试！');
},
complete: function() {
$loading.hide();
loading = false;
}
});
};
if (sessionStorage.getItem("listData")) {
state = JSON.parse(sessionStorage.getItem("listData"));
sessionStorage.removeItem("listData"); //防止调转回列表页，点击刷新时，继续读缓存
pageIndex = state.pageIndex;
numID = state.numID;
historyData = state.historyData;
if (historyData.length > 0) {
$panel.append(template('mycontents', {
list: historyData,
pages: parseInt(pageIndex)
}));
setTimeout(window.scroll(0, sessionStorage.getItem("scrollTop")), 500);//跳转到之前的位置
} else {
var html = '<div class="qsy">\n' +
' <img src="__STYLE__/img/img22.jpg" alt="">\n' +
' <span>暂无数据</span>\n' +
' <a href="/Index/index">返回首页</a>\n' +
' </div>'
$panel.append(html);
$("[data-more]").hide();
$(".ts").hide();
}
sessionStorage.removeItem("listData");
sessionStorage.removeItem("scrollTop");
getData(pageIndex + 1);
//改变已查看的商品样式方法
} else {
getData();
}
/***分页**/
/***分屏***/
$(document).scroll(function() {
if (page > 1) {
// $(".ts").hide();
if ($(document).height() - $(document).scrollTop() - 20 <= $(window).height()) {
getData();
}
}
});
})跳转到详情页的方法代码如下:
// 跳转详情页方法
function jumpurl(o) {
var gid = $(o).attr('gid');
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
sessionStorage.setItem("scrollTop", scrollTop);
numID = gid;
state = {
pageIndex: pageIndex,
numID: numID,
historyData: historyData
};
sessionStorage.setItem("listData", JSON.stringify(state));
// console.log(sessionStorage.getItem("listData"))
window.location.href = ROOTPATH + "/Goods/spxq/id/" + gid + "/uid/{$uid}";
}
