微信返回列表页回到原浏览位置问题记录

欢迎大家来到IT世界,在知识的湖畔探索吧!

微信打开网页从列表页进入详情页面点击返回，回到列表页浏览位置。

在使用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开发，如有错误欢迎指正。