美文网首页
jquery 微信浏览器自带的返回上一页的停留位置 scrol

jquery 微信浏览器自带的返回上一页的停留位置 scrol

作者: 前端陈陈陈 | 来源:发表于2020-12-17 12:08 被阅读0次

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>

相关文章

网友评论

      本文标题:jquery 微信浏览器自带的返回上一页的停留位置 scrol

      本文链接:https://www.haomeiwen.com/subject/qlfzgktx.html