在微信浏览器中，使用返回上一个页面
history.back()
或者使用物理返回都会造成微信浏览器强制刷新，相当于了reload页面。当我们的页面存在ajax请求渲染的数据时，这样就会造成非常不好的体验，用户在list列表点击某个item查看详情，每次返回时页面都会重新loading刷新。
解决方案：
主要通过
sessionStorag
实现解决。
1、在list页面刷新获取到的数据存进sessionStorag
2、判断是否从详情页返回，详情页设置refresh为true
sessionStorage.setItem("refresh", true);3、list页面判断sessionStorag中是否同时存在listData和refresh，若存在则使用listData数据渲染页面，若不存在则刷新页面
4、点击list页面某个item时需要保存当前页码及当前滚动条位置到sessionStorag
page主要用于返回的缓存数据后定位当前页码，top定位浏览器滚动条当前位置
页面大致代码如下，使用了JS模板引擎及dropload刷新插件
JS模板：
<script type="text/html" id="tdTemplate">
<% if(list.length>0){ %>
<% for (var i = 0, leni = list.length; i < leni; i++) { %>
<a href="<?php echo $this->createUrl('user/MessageDetail',array('id'=>''))?><%=list[i].id %>" class="msg-item-wrap unread">
<img src="../../../../../public/kouzi/wechat/img/msg-icon.png" class="msg-item-icon">
<div class="msg-item">
<div><%=list[i].title %></div>
<div class="msg-item-cont"><%=list[i].text %></div>
</div>
<div class="msg-item-date"><%=list[i].create %></div>
<% if(list[i].read == 1){ %>
<div class="msg-item-tips"></div>
<% } %>
</a>
<% } %>
<% } %>
</script>
JS代码：
<script>
$(function () {
var pageSize = 10;
var page = 0;
var aList = '';
var aParam = {};
var autoLoad = true; //用于判断是否自动加载
var refresh = sessionStorage.getItem('refresh'); //判断是否刷新（变量来自于详情页）
var listData = '';
backList();
/**
* 记录滚动条位置及页码
**/
$(document).on('click','.msg-item-wrap',function (e) {
e.preventDefault();
aParam = {
page: page, //当前页码
top: $('.page-content').scrollTop()
};
aParam = JSON.stringify(aParam);
sessionStorage.setItem('aParam', aParam);
window.location.href = $(this).attr('href');
});
/**
* 上拉刷新加载
**/
$('.page-content').dropload({
scrollArea : $('.page-content'),
autoLoad:autoLoad,
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData : '<div class="dropload-noData">暂无更多消息</div>'
},
loadDownFn : function(me){
$.ajax({
type: 'post',
url: '<?php echo $this->createUrl('user/ajaxMessageList')?>',
data:{
'page': page,
'pageSize': pageSize
},
success: function(result){
page = page+pageSize;
var items='';
if(result.data.list.length > 0){
items = template.render("tdTemplate", {list: result.data.list});
aList +=refresh ? listData+items : items;
sessionStorage.setItem('aList', aList);
sessionStorage.setItem('nomore', false);
}
if(result.data.list.length < pageSize || !result.data.list){
sessionStorage.setItem('nomore', true);
me.lock();
// 无数据
me.noData();
}
// 为了测试，延迟1秒加载
setTimeout(function(){
$('.msg-center-wrap').append(items);
// 每次数据加载完，必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
// 即使加载出错，也得重置
me.resetload();
}
});
}
});
/**
* 返回列表页时，取存储的sessionStorage数据，有，则取数据渲染页面，并滑到预期位置
* 删除sessionStorage存储的历史数据
*/
function backList() {
listData = sessionStorage.getItem('aList');
var param = JSON.parse(sessionStorage.getItem('aParam'));
var nomore = JSON.parse(sessionStorage.getItem('nomore'));
// listData用于保存列表数据
// 页面加载时判断sessionStorage是否存有列表数据，有则赋值给listData，否则，listData取同步加载的第一页数据
// window.listData = aList ? aList : pageConfig.listData;
autoLoad = listData&&refresh ? false : true;
if (listData != null && refresh) {
// 加载列表
$('.msg-center-wrap').html(listData);
// 滚动到对应位置，并清除sessionStorage
$('.page-content').scrollTop(param.top);
page = param.page;
//没有更多数据的时候延时加载样式
if(nomore){
setTimeout(function () {
$('.dropload-refresh').addClass('dropload-noData').removeClass('dropload-refresh').text('暂无更多消息');
},100);
}
if(!refresh){
sessionStorage.removeItem('aList');
sessionStorage.removeItem('aParam');
}
sessionStorage.removeItem('refresh');
}
}
})
</script>