layui.flow流加载,ajax列表页进入详情页返回还在原来位置

未结贴
12 385
有两个手机页面,A是列表页面,有很多列表项,数据加载方式是滚动加载,B是详细页面,从A列表页点击其中一个链接进入详细页面,返回的时候怎么样回到原来位置?
  • 第一把菜刀 第一把菜刀
    2017-02-16 16:06:15
    [偷笑] 详情页新窗口弹出
    0 回复
  • eyuxiog eyuxiog
    2017-02-16 16:14:02
    @第一把菜刀 这个是种解决方法。我想用sessionStorage来做,用sessionStorage储存分页,不知道怎么给page赋值,每次page都是从1开始了
    0 回复
  • 第一把菜刀 第一把菜刀
    2017-02-16 16:28:20
    你的返回是记录的返回还是url跳转
    0 回复
  • eyuxiog eyuxiog
    2017-02-16 16:54:58
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- <meta http-equiv="refresh" content="10,url=http://www.baidu.com" > -->
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    </head>
    <body>
    <style>
    #LAY_demo1 li{
    margin:30px 0;
    }
    </style>
    <ul class="flow-default" id="LAY_demo1"></ul>


    <script src="http://www.zeptojs.cn/zepto.min.js"></script>
    <script src="./layui/layui.js" charset="utf-8"></script>

    <script>
    /*$(function () {
    var str = window.location.href;
    str = str.substring(str.lastIndexOf("/") + 1),
    getCookie = sessionStorage.getItem(str);
    console.log(str)
    console.log(getCookie)
    if (getCookie) {
    $("html,body").scrollTop(getCookie);
    }
    });
    $(window).scroll(function () {
    var str = window.location.href;
    str = str.substring(str.lastIndexOf("/") + 1);
    var top = $(window).scrollTop(); //在zepto下这里使用$(document)是获取不到页面滚动的高度,在jq下是可以的
    sessionStorage.setItem(str, top);
    // console.log(top)
    });*/



    var curPage = 1;
    window.onload = function()
    {
    if(window.sessionStorage){
    var top = parseInt(sessionStorage.getItem("top"));
    var curPage = parseInt(sessionStorage.getItem("curPage"));
    console.log(curPage)
    var html = sessionStorage.getItem("html");
    top = top?top:0;
    curPage = curPage?curPage:1;
    // console.log(top)
    /*for (var i = 1; i <= 999; i++){

    $str = '<li><a href="http://www.baidu.com">百度'+ ( (1-1)*108 + i + 1 ) +'</a></li>';
    $("#LAY_demo1").append($str)
    }; */
    if(top==0 || html==null){
    flow(1);
    }else{
    // console.log(html)
    $("#LAY_demo1").html(html)
    $flowText = $(".layui-flow-more").text()
    if($flowText!="没有了哦"){
    flow(curPage);
    }

    }
    document.body.scrollTop = top;
    }
    }

    $(window).scroll(function(){
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
    var tops=document.body.scrollTop;
    if(window.sessionStorage){
    sessionStorage.setItem("top",tops);
    sessionStorage.setItem("curPage",curPage);
    // console.log(curPage)
    $html = $("#LAY_demo1").html();
    sessionStorage.setItem("html",$html);

    // sessionStorage.clear();
    }
    });
    </script>
    <script>
    function flow(pages){
    layui.use(['flow'], function(){
    var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。
    var flow = layui.flow;
    flow.load({
    elem: '#LAY_demo1' //指定列表容器
    ,end: '没有了哦' //用于显示末页内容,可传入任意HTML字符。默认为:没有更多了
    ,done: function(page, next){ //到达临界点(默认滚动触发),触发下一页
    var lis = [];
    //以jQuery的Ajax请求为例,请求下一页数据(注意:page是从2开始返回)
    $.post("ajax.php", {"page":page}, function(res){
    //假设你的列表返回在data集合中

    // console.log(page);
    // var domain = window.location.host;//获取域名
    // var url = "http://"+domain+"/Home/Shop/detail/id/";
    layui.each(res.goodsArr, function(index, item){
    var str = "";
    var str = str + '<li class="pic" style="width: 80%;margin-bottom:9%;padding-right: 1%">';
    var str = str + '<a href="http://www.baidu.com">'+item.name+'</a>';
    // var str = str + '<img src="'+item.goods_img+'">';
    var str = str + '</li>';

    $("#LAY_demo1 .layui-flow-more").before(str);

    // lis.push(str);
    });
    //执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
    //
    //pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
    // console.log(res.pages)
    next(lis.join(''), page < res.pages);
    },"json");
    }

    });
    });
    }
    </script>

    </body>
    </html>
    0 回复
  • eyuxiog eyuxiog
    2017-02-16 16:55:22
    这个是代码
    0 回复
  • eyuxiog eyuxiog
    2017-02-16 17:01:52
    点到详情页返回时,page值从1开始执行了
    0 回复
  • eyuxiog eyuxiog
    2017-02-16 17:33:16
    @第一把菜刀 layui.flow 如果可以自定义页码就好了
    0 回复
  • 第一把菜刀 第一把菜刀
    2017-02-17 11:48:24
    自定义页码。。。比如你进入的时候是第一页,然后你加载到了第三页了,这时候你进入详情页,然后再返回来,这个时候你想设置成第三页,那么你要怎么加载呢,把1、2、3一起加载?好像也不合理吧,况且如果是按键盘上的返回键返回应该是不会触发页面刷新的,不刷新你就没法处理
    0 回复
  • eyuxiog eyuxiog
    2017-02-17 14:24:25
    不会一起加载呀, 1、2、3页我已经用sessionStorage储存起来了(同时储存页码) 返回时直接读1、2、3页内容然后加载拼上第4页就行了
    0 回复
  • chn chn
    6天前
    我也遇到了这种情况
    0 回复
  • chn chn
    6天前
    后台如何向前台提交页面参数
    0 回复
  • 胖男 胖男
    6天前
    楼主你的这个问题解决了吗?
    0 回复
最近热帖
vip-admin Html v1.5.0 更新了 - 基于layui的后台模板 1387
一个为您省时省力的后台模板jqadmin 1048
meTools - 基于layui+vue的在线工具网站 952
基于layui的后台模板 - 反正我觉得我的界面是最漂亮的 880
你的案例或技术分享,将会被置顶推荐 825
LayuiHelp,一个良心插件,为你的代码插上翅膀! 738
LayUI SELECT 多级级联实现,理论上是无限级的 582
Admin-Template 后台模板(开发中...) 510
基于TP5加Layui的轻社区系统,争取下个月上线 291
laypage分页模块扩展之pagesize.js(layui2.0不知道会不会有这个功能) 215
近期热议
一个为您省时省力的后台模板jqadmin 24
基于layui的后台模板 - 反正我觉得我的界面是最漂亮的 20
LayuiHelp,一个良心插件,为你的代码插上翅膀! 17
layer的使用,以前用的时候还没挺好的怎么现在layer的弹出框一直报错,求大神给指点一下 15
vip-admin Html v1.5.0 更新了 - 基于layui的后台模板 15
form表单提交,监听提交按钮,用ajax异步检测名称是否已存在,ajax 不执行! 14
遮罩通过parent 可以全屏,但窗口不能传值了? 12
layui点击左侧固定导航栏时,如何在右侧显示,而并不是打开新窗口呢 12
select联动初始化数据form.render();不能逐个渲染的问题。 11
为什么layui分页只有一页的情况下不无法显示组件呢? 11