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

未结贴
12 1159
有两个手机页面,A是列表页面,有很多列表项,数据加载方式是滚动加载,B是详细页面,从A列表页点击其中一个链接进入详细页面,返回的时候怎么样回到原来位置?
空闲广告位,联系:xianxin@layui.com
  • 第一把菜刀 第一把菜刀
    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
    2017-03-18 20:35:16
    我也遇到了这种情况
    0 回复
  • chn chn
    2017-03-18 20:35:39
    后台如何向前台提交页面参数
    0 回复
  • 胖男 胖男
    2017-03-19 09:03:07
    楼主你的这个问题解决了吗?
    0 回复
最近热帖
完全基于 layui 开发的后台管理模板 2855
三层导航怎么做? 657
「源码市场」 正式版本上线 基于layui开发 619
2.0啥时候出啊,新项目要启动了 565
给2.0一些期待 487
麻烦朋友们投个票呗,FLY社区模板+thinkphp5驱动+个人DIY 388
layui整合datatable了么 338
ajax修改资料成功后 怎么进行初始化 页面刷新还是调用登录时的缓存 292
form.render('select') 更新渲染问题 252
这个社区的完整源码能不能共享 242
近期热议
完全基于 layui 开发的后台管理模板 37
layui富文本编辑器图片上传无法回显 15
表单校验无效,找了好长时间找不到原因,求大神看下 14
这个社区的完整源码能不能共享 14
ajax修改资料成功后 怎么进行初始化 页面刷新还是调用登录时的缓存 10
select 动态操作不起作用,求助 10
多个layer的bug 10
给2.0一些期待 9
laytpl不解析 8
文本编辑器出不来 8