最近在做微信网页优化,,发现在微信中浏览列表的时候滑到了一个中间的位置,点击了某一个详情,可是从详情页返回之后发现列表又重新开始返回到了第一个,列表的数据下拉通过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; 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 = localStorage.getItem("ProjectListAjaxData"); if (ProjectListAjaxData == null) { ProjectListAjaxData = ""; }
//加载ajax数据
function loadcarrier() { var html = ""; $.ajax({ type: "POST", url: "/Company/ListCompany", data: { 'page': pages, 'size': sizes, }, dataType: "html", 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); })