最近在做微信网页优化，,发现在微信中浏览列表的时候滑到了一个中间的位置，点击了某一个详情，可是从详情页返回之后发现列表又重新开始返回到了第一个，列表的数据下拉通过ajax加载数据，从详情页返回的时候页面进行了刷新，原来的数据被刷掉了，这几天百度了很多，刚开始看着很懵逼，询问了一些大佬，参考了百度到的东西，慢慢的摸索，终于解决了这个问题，记录一下，方便以后使用。代码如下：
HTML页面：
<div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" id="listwrap" style="height:100%; margin-top: 1px;overflow:auto; background-color: #fff; border: none; width: 100%; z-index: 1">
<!--下拉刷新-->
<div class="weui-pull-to-refresh__layer" style="padding: 5px;margin-top: -40px;">
<div class=‘weui-pull-to-refresh__arrow‘></div>
<div class=‘weui-pull-to-refresh__preloader‘></div>
<div class="down">下拉刷新</div>
<div class="up">释放刷新</div>
<div class="refresh">正在刷新</div>
</div>
<div id="companylist" style="background-color: #f3f3f3;">
</div>
<div class="weui-loadmore" style="padding-bottom:30px;height:20px">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>
</div>
js 文件：
//页面滚动获取滚动条距离顶部的距离
$("#listwrap").scroll(function (event) {
// console.log( $("#listwrap").scrollTop());
window.localStorage.setItem("scrollY", $("#listwrap").scrollTop());
});
//获取保存好的Ajax加载的数据，如果不存在，赋值为空
var ProjectListAjaxData = sessionStorage.getItem("ProjectListAjaxData");
if (ProjectListAjaxData == null) {
ProjectListAjaxData = "";
}
//加载ajax数据
function loadcarrier() {
var html = "";
$.ajax({
type: "POST",
url: "/Company/ListCompany",
data: {
‘page‘: pages,
‘size‘: sizes,
},
dataType: "json",
error: function (request) {
$(‘.weui-loadmore‘).hide();
html += "<div class=\"weui-cells__title\">已无更多数据</div>";
$("#companylist").append(html);
},
success: function (data) {
$("#companylist").append(data);
// console.log(data);
//记录浏览项目异步加载的数据
ProjectListAjaxData = ProjectListAjaxData + data;
window.localStorage.setItem("ProjectListAjaxData", ProjectListAjaxData);
window.localStorage.setItem("page", pages);//记录翻页的页数
}
});
}
$(document).ready(function () {
//判断是否是从详细页面返回
if (window.localStorage.getItem("openDetails")) {
//使用完马上删除
window.localStorage.removeItem("openDetails");
//页面回跳插入ajax加载 data
ProjectListAjaxData = localStorage.getItem("ProjectListAjaxData");
if (ProjectListAjaxData != null && ProjectListAjaxData != "") {
console.log(ProjectListAjaxData);
$("#companylist").append(ProjectListAjaxData); //把cookie数据放进列表
}
else {
ProjectListAjaxData = "";
}
//页面回跳跳转的位置
var scrollY = window.localStorage.getItem("scrollY");
page = window.localStorage.getItem("page");
if (scrollY) {
$("#listwrap").animate({ scrollTop: scrollY }, 0);
}
}
else { //如果不是从详情页返回
//清除缓存页面数据session
ProjectListAjaxData = "";
window.localStorage.removeItem("ProjectListAjaxData");
window.localStorage.removeItem("scrollY");
loadcarrier(); //加载数据
}
});
在详情页设置：
$(function () {
window.localStorage.setItem("openDetails", 1);
})
