zoukankan      html  css  js  c++  java
  • mui scrollTo到指定位置,出现空白页及拉不动的问题解决

    使用方式简介

             

      mui 列表页使用的是 mui的插件实现的上拉加载下拉刷新,但是从详情页回到列表页时 不能回到之前的位置。所以想到了使用缓存。

       第一次和第二次的试验是失败的。失败后,就想用其他办法来解决这个问题。所以试验了WeUi+mui,WeUI+listloading.js 以及纯WeUi。

    发现都是有不同的问题。WeUI的跳转方式采用的同页面跳转 锚链接的方式。这种方式其实也是能解决问题的。

    但是,我发现这样做太繁琐,一个页面的代码太多,太乱不易于维护,且同一个HTML文件包含多个页面,

    容易造成样式冲突,js冲突等多个问题。所以就把它pass掉了。

            然后又调转枪头从新从根源(mui)入手来解决问题。经过一天的调试试验,再加上前两次失败的经验。总算是找到了解决办法。

    第一步,首先在页面展示数据的时候 把数据存储在一个Array集合里面,等到要跳转详情页时,把数据、当前滚动的位置

    (mui-scrollTo 的y轴 获取方法为 mui('.mui-scroll-wrapper').pullRefresh().y )、分页数  及查询条件存储在sessionStorage里面

    代码如下:

         //因为mui 默认禁止了 a标签跳转,所以只能用这种方式进行操作。
        mui('body').on('tap','a',function(){ if(this.target=="_blank"){ // console.log("itemContent=="+$("#item1curpage").val()); sessionStorage.setItem("item-content", JSON.stringify(itemContent));//列表数据缓存 sessionStorage.setItem("domestic_ship-y", mui('.mui-scroll-wrapper').pullRefresh().y);//滚动位置 sessionStorage.setItem("item1curpage",$("#item1curpage").val());//分页数 sessionStorage.setItem("form-div",$("#form-div").html());//其他相关数据。 var url=this.href; mui.openWindow({ url:url }); } });

    第二步就是再次回到这个列表页 时取出缓存好的数据,代码如下:

    var itemContent= new Array();//存储数据的集合
        var item1curpage=0;// 分页页数
        var domesticShipForm =null;//查询条件
        var mask =null;
            mask = mui.showLoading("","div");
        $(function(){
                //获取缓存的查询条件
                domesticShipForm = sessionStorage.getItem("domesticShipForm"); 
                //加上分页查询条件
                if(domesticShipForm!=null && domesticShipForm!=""){
                    domesticShipForm=domesticShipForm+"&curpage="
                }else{
                    domesticShipForm="curpage="
                }
                console.log("domesticShipForm=="+domesticShipForm);
            //获取之前缓存的数据 判断是否存在,不存在:则加载新数据,存在:则加载缓存数据。
            var item=JSON.parse(sessionStorage.getItem('item-content')); // sessionStorage.getItem("item-content");
            if(item==null || item==""){
                $("#form-div").css("display","none");
                mui.ajax({
                    url: domesticShip.URL.queryListData(),
                    data: domesticShipForm+$("#item1curpage").val(),//$("#domesticShipForm").serialize()
                    async: true, // true异步, 同步
                    dataType: 'json',
                    type: 'post',
                    timeout: 10000,
                    success: function(data) {// 请求成功
                        if(data.flag){//判断返回值是否正常
                            domesticShip.fun.loopShowData(data.data.pshipList);//数据通过模板进行展示
                            mui.hideLoading(mask);
                        }else{
                            mui.toast('请求数据发生异常');
                        }
                    },
                    error: function(xhr, type, errorThrown){ // 请求失败
                        mui.toast('请求数据发生异常');    
                        mui.hideLoading(mask);//隐藏加载框
                    }
                });
            }else{
                //获取之前缓存的 html 代码 并展示在页面上,因为这个项目使用了i18n 语言切换功能,
                //而i18n需要一定的加载时间,所以我只好把它们缓存起来。这样就不用等待i18n的语言切换时间了。
                var formDIv=sessionStorage.getItem("form-div");
                $("#form-div").html(formDIv);//赋值给指定的html
                
                //展示缓存数据 把从缓存里取出的数据展示出来
                domesticShip.fun.loopShowData(item);
                //获取分页页数
                item1curpage=sessionStorage.getItem("item1curpage");
                if(item1curpage!=0 && item1curpage!=null){
                    $("#item1curpage").val(sessionStorage.getItem("item1curpage"));//分页赋值
                }else{
                    $("#item1curpage").val("0");//分页赋值
                    item1curpage=0;
                }
    //            console.log("item1curpage1==="+sessionStorage.getItem("item1curpage"));
                
                var y=sessionStorage.getItem("domestic_ship-y");//获取之前缓存的 滚动位置
                //判断滚动位置是否存在 是否与当前滚动位置一致
                if(y!=null && y!='' &&  y!=mui('.mui-scroll-wrapper').pullRefresh().y){
                    //设置定时器 预留数据加载时间,数据加载完毕 再进行滚动。
                    //执行顺序是顺序执行的,先执行完数据加载,后执行滚动,所以不用设置太长的时间
                    setTimeout(function(){
                        //一个大坑,从缓存获取的 y轴数据 必须要强转成int类型。
                        //最主要的不强转类型 竟然没有错误提示,只是页面会出现滚动失灵,空白页面的情况。所以这个问题找了很久
                        mui('.mui-scroll-wrapper').pullRefresh().scrollTo(0,parseInt(y),20);
                        mui.hideLoading(mask);//隐藏加载框
                    },110);
                }else{
                        mui.hideLoading(mask);//隐藏加载框
                }
            }
        })

    之前大概有两处有问题:

      1.我之前是缓存的html页面

      2.我没有想到 滚动条的y轴需要强转成int类型(大坑)

      其实数据实现之后,还想过并查询过 sessionStorage的过期时间及存储大小

      过期时间:去网上查了很多资料,说只有关闭了当前访问的页面sessionStorage才会关闭,那过期问题基本是不存在的了。因为页面一直是切换的,

      关了这个页面,再打开属于重新请求了。也就不需要缓存了。

           存储大小:上图说话

    我自己也测试过,虽然没有测试那么多数据吧。也翻了30多页。我想大小应该是没问题的。

    2621440 字节 约等于 2.5mb  2.5mb 能存多少字那? 粗略的算了一下大概是150W左右。

    一条信息150字,相当于可以存储1W条信息,1W除于10(分页数一般为10)=1000页。

    相信一般情况下是用不了那么多的。

    对于一些日常办公的功能还是能适应的。毕竟你要是想找那条信息,肯定知道点关键字什么的。

    如果数据真的有这么多。那你只能另想其他办法了。

    另外也测试过重新赋值问题

     sessionStorage.setItem("item1curpage","10"); 重新赋值,会替换调之前的值。

     本博客是本人原创 未经允许不得转载 谢谢。

      链接地址:http://www.cnblogs.com/richard-ju/p/L2018002.html

      demo演示地址:http://www.nsnxg.cn/jushr/share/html/mui-scrollTo.html

     demo下载地址:http://www.nsnxg.cn/jushr/share/html/download?code=L2018002

  • 相关阅读:
    【Azure 应用服务】由 Azure Functions runtime is unreachable 的错误消息推导出 ASYNC(异步)和 SYNC(同步)混用而引起ThreadPool耗尽问题
    【Azure API 管理】是否可以将Swagger 的API定义导入导Azure API Management中
    【Azure 应用服务】Azure Function 不能被触发
    【Azure 环境】Azure Key Vault (密钥保管库)中所保管的Keys, Secrets,Certificates是否可以实现数据粒度的权限控制呢?
    【Azure 事件中心】为应用程序网关(Application Gateway with WAF) 配置诊断日志,发送到事件中心
    【Azure 事件中心】azure-spring-cloud-stream-binder-eventhubs客户端组件问题, 实践消息非顺序可达
    【Azure API 管理】Azure API Management通过请求中的Path来限定其被访问的频率(如1秒一次)
    【Azure 环境】前端Web通过Azure AD获取Token时发生跨域问题(CORS Error)
    【Azure 应用服务】记一次Azure Spring Cloud 的部署错误 (az spring-cloud app deploy -g dev -s testdemo -n demo -p ./hellospring-0.0.1-SNAPSHOT.jar --->>> Failed to wait for deployment instances to be ready)
    【Azure 应用服务】App Service中抓取 Web Job 的 DUMP 办法
  • 原文地址:https://www.cnblogs.com/richard-ju/p/L2018002.html
Copyright © 2011-2022 走看看