微信打开网页从列表页进入详情页面点击返回,回到列表页浏览位置。
在使用a标签跳转后在返回列表页会重新加载(内容都是通过ajax加载),无法回到原浏览位置,而且微信内置浏览器只允许有一个标签页。<a target='_blank'> </a> 无效。
没办法只好用sessionStorage解决,在列表页点击跳转前,缓存列表内容、页数和滚动条位置:
<a href="javascript:;" v-on:click="go([item.t === 'b' ? 'newsdetail.html?id='+item.id : 'videodetail.html?id='+item.id])"></a>
绑定点击事件,判断跳转页面。
go(url) {
//console.log('跳转');
//缓存列表数据
sessionStorage.setItem('index_list', this.$refs.wrapper.innerHTML);//参考vuejs $refs
//缓存滚动条位置
sessionStorage.setItem('index_scroll', $(window).scrollTop());
//缓存当前页码
sessionStorage.setItem('index_page', page);
window.location.href = url;
return false;
}
在返回列表页时,页面会重新加载,需要判断缓存是否存在,如果存在加载缓存数据,否则重新加载。
var lists = sessionStorage.getItem("index_list");//加载缓存
if (null !== lists && '' !== lists) {
//恢复数据
//$("#wrapper").html(lists);
//window.scrollTop(sessionStorage.getItem('index_scroll'));
//document.getElementById("wrapper").innerHTML = lists;
page = sessionStorage.getItem('index_page');
var scrol = sessionStorage.getItem("index_scroll");
//请求数据
axios.post('不告诉你').then((response) => {
this.list.push(response.data);
this.newsList = this.list[0];
console.log(this.newsList);
})
//滚动条事件
$("html,body").animate({ scrollTop: scrol }, 1000);
//删除缓存
sessionStorage.removeItem('index_list');
sessionStorage.removeItem('index_scroll');
} else {
//请求数据
axios.post('不告诉你').then((response) => {
this.list.push(response.data);
this.newsList = this.list[0];
console.log(this.newsList);
})
}
}
第一次使用vuejs开发,如有错误欢迎指正。