1、在详情页监听返回事件:
<script type="text/javascript">
pushHistory();
sessionStorage.setItem("isBack",true); // 传个值在列表页判断是不是
详情返回的
window.addEventListener("popstate", function(e) {
// alert(window.sessionStorage.getItem("isBack"))
window.location = document.referrer;
}, false);
function pushHistory(){
var state = {
title: "title",
url: location.href
};
window.history.pushState(state, "title", location.href);
}
</script>
2、商品列表:
<script language="javascript">
var isBack = sessionStorage.getItem("isBack");
console.log('is',sessionStorage.getItem("size"))
if(isBack){
let total = (sessionStorage.getItem("size") -1) *20 // 因为第一页数据是后端渲染,所以page要从第二页开始算,每页数据20条, total 是只浏览当前页的page - 1 *20 ,后端会把这些数据给你。
let page = 2 // 详情返回时重置page ,从第二页开始
getMore(page,total)
// setTimeout(function(){
// sessionStorage.clear()
// isBack = false
// },2000)
}
var flag = true
var page = 1
$("#list_goods_box").scroll(function (event) {
console.log('chen',isBack)
var h = $(this).height(); //div可视区域的高度
var sh = $(this)[0].scrollHeight; //滚动的高度,$(this)指代jQuery对象,而$(this)[0]指代的是dom节点
var st = $(this)[0].scrollTop; //滚动条的高度,即滚动条的当前位置到div顶部的距离
console.log(st)
sessionStorage.setItem("top", st);
if (h + st >= sh - 3) {
if (flag) {
page++
sessionStorage.setItem("size",page);
if(isBack)
return;
getMore(page)
}
}
// else if( st == 0){
// console.log('到顶了')
// }
});
var list = []
function getMore(page,total) {
$.ajax({
url: "{php echo mobileUrl('groups')}" + "&page=" + page,
data: {
page: page ,
total:total
},
type: 'post',
cache: false,
dataType: 'json',
success: function (data) {
if (data.status == 1) {
list = data.result.list
// console.log(list)
var html = '';
for (var i = 0; i < list.length; i++) {
html += '<li class="lynn_index_list_li fui-list goods-list fol_lf">'
html += '<a href="' + list[i].url + '">'
html += '<div class="lynn_box">'
html += '<a href="' + list[i].url + '"'
html += 'class="external lynn_index_list_a fui-list-media">'
html += '<img data-lazy="' + list[i].thumb + '" alt="' + list[i].title + '"'
html += 'onerror="this.src=' + '../addons/ewei_shopv2/static/images/nopic100.jpg' + '">'
html += '</a>'
html += '<div class="lynn_index_list_info fui-list-inner"'
html += 'onclick="window.location.href=' + list[i].url + ';">'
html += '<h3 class="lynn_tests"><span class="person">' + list[i].person + '</span>'
html += '<span class="person">赏金' + list[i].mr_money + '元/人</span></br>' + list[i].title + '</h3>'
html += '<span>'
html += '原价:¥' + list[i].price
html += '</span>'
html += '<div class="price">'
html += '<span>' + list[i].groupsprice + '</span>'
html += '<a href="' + list[i].url + '"'
html += 'class="external lynn_index_list_team_a">拼团 </a>'
html += '</div></div></div></a></li>'
}
// console.log(html)
$(".lynn_index_list_ul").append(html);
}
if (data.result.list.length == 0) {
flag = false
// $("#errormsg").html("到底啦!!").show(300).delay(3000).hide(300);
// $(function () {
// $.growl({
// title: "",
// message: "到底啦!!"
// });
// })
}
},
error: function () {
alert("页面加载错误!");
}
});
}
window.onload = function(){ //页面加载完成后,滚动定位到之前浏览的地方
$("#list_goods_box").scrollTop(sessionStorage.getItem("top")); // 滚动定位
isBack = ''
}
</script>
网友评论