问题的说明
微信公众号,用户正在查看寻呼加载列表。 进入第n页并进入详细页面,返回后页面更新并返回顶部。 必须返回到用户以前浏览的位置。
分析问题
Android和IOS的某些机型的微信回复类似于window.location=xxx强制刷新。
另一方面,IOS的一些机型返回微信是因为window.history.back )返回历史页面,不更新页面(js也不重新运行)。
解决想法
1 .分页加载时,用一个变量保存ajax加载的数据。
var list数据=null;
//分页加载时,将导入的数据保存到listData中
if(curpage==1) {
列表数据=Ajax列表;
} else {
列表数据=list data.concat (Ajax list );
}
2 .跳转页面前在sessionStorage中记录ajax加载的数据、页面滚动距离和页码
//在跳页前记录列表数据、页面滚动距离、页码,保存到sessionStorage中
varlist=JSON.stringify (列表数据);
var param={
page: curPage,
top : document.body.scroll top
(;
param=JSON.Stringify(param );
会话存储. setitem (a list )、list );
会话存储. setitem (a param )、param );
3 .进入列表页面时,取sessionStorage中存储的aList,取aList时,用sessionStorage中的数据渲染页面,滚动到对应的位置,记录当前的页码,选择然后清除存储在会话存储中的相关数据。
var curPage=1;
varalist=JSON.parse (session storage.getitem ) ) alist );
varaparam=JSON.parse (session storage.getitem ) (a param );
//listData被用于保存列表数据
//在页面加载期间确定会话存储中是否存在列表数据,如果有,将其分配给列表数据。 否则,listData获取同步加载的第一页数据
//分页加载时,将数据存储在list data : list data=list data.concat (adata.a list )中
window.listData=aList? aList : pageConfig.listData;
IF (A列表!=空) {
//处理原始ajax加载的数据并插入HTML
//滚动到对应的位置
document.body.scroll top=a param.top;
//用于记录当前页码并继续翻页
curPage=aParam.page;
清除存储在会话存储中的相关数据
会话存储. remove item (a list );
sssionstorage.remove item (a param );
}
会话存储仅支持字符串类型的访问,JSON需要类型转换。
输入,则显示字符串JSON.stringify (
读取时JSON JSON.parse () () ) ) ) ) ) )
不够
对于不更新回复的微信,如果回复后不运行js,则会话存储不会为空,并且在更新该页面时,会先获取存储在会话存储中的列表数据。