您的位置:首页 > 移动开发 > 微信开发

微信内置浏览器返回上一页,页面被刷新

2017-03-18 23:20 561 查看
问题描述:前些日子,有同事做微信服务号项目,遇到一个比较纠结的问题,window.history.back()在微信浏览器中会刷新页面。具体场景是这样的,列表页,下拉分页加载数据,滑到第3页的某条楼盘,进入详情页后,返回列表页,页面停留在第1页的最后一个楼盘;
预期结果:从详情页返回列表页,页面仍然停留在第3页的某条楼盘;
问题分析:在微信内置浏览器中,window.history.back()类似于window.location.reload()会刷新页面,对于有分页加载的列表页,从详情页返回列表页时,往往会返回第1页的最后1个楼盘,它不是真正意义上的刷新,列表页真正的刷新应该是回到第1页的第1个楼盘。
解决方案:用sessionStorage本地存储数据,需要时读取。

/**
* 从列表页跳转详情页前,把已经分页加载的数据,页码,scrollTop存入sessionStorage
*/
function setStorage(loupanid){
if (是列表页) {
var aList = JSON.stringify(listData);//把json数据转为string字符串
var aParam = {
page: conf.page,  //当前页码
top: $(window).scrollTop(),
nomore: !$('#J_noMore').hasClass('hide')
};
aParam = JSON.stringify(aParam);
sessionStorage.setItem('aList', aList);//sessionStorage只能存储string字符串
sessionStorage.setItem('aParam', aParam);
}
}

/**
* 返回列表页时,取存储的sessionStorage数据,有,则取数据渲染页面,并滑到预期位置
* 删除sessionStorage存储的历史数据
*/
function backList() {
var aList = JSON.parse(sessionStorage.getItem('aList'));
var aParam = JSON.parse(sessionStorage.getItem('aParam'));

// listData用于保存列表数据
// 页面加载时判断sessionStorage是否存有列表数据,有则赋值给listData,否则,listData取同步加载的第一页数据
window.listData = aList ? aList : pageConfig.listData;
if (aList != null) {
// 加载列表
var listhtml = Template.parse(listTpl, {
data: aList
});
$('#J_house').html(listhtml);

// 更新加载状态
if (aParam.nomore) {
$('#auditin').addClass('nomore');
$('#J_noMore').removeClass('hide');
} else {
$('#auditin').removeClass('nomore');
$('#J_noMore').addClass('hide');
}

// 滚动到对应位置,并清除sessionStorage
document.body.scrollTop = aParam.top;
conf.page = aParam.page;
sessionStorage.removeItem('aList');
sessionStorage.removeItem('aParam');
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: