当前位置:Gxlcms > JavaScript > 单页面情况下laypage开启时hash的优化方法(代码)

单页面情况下laypage开启时hash的优化方法(代码)

时间:2021-07-01 10:21:17 帮助过:3人阅读

本篇文章给大家带来的内容是关于单页面情况下laypage开启时hash的优化方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

单页面的时候,laypage开启hash会冲掉之前的hash

解决思路,调整hash的跳转方式以及curr的计算方式

之后的hash会是这样 #/data/tiebaluntan#!page=98

修改地方有两个:

laypage.js中

//渲染分页
  Class.prototype.render = function(load){
    var that = this
    ,config = that.config
    ,type = that.type()
    ,view = that.view();
    
    if(type === 2){
      config.elem && (config.elem.innerHTML = view);
    } else if(type === 3){
      config.elem.html(view);
    } else {
      if(doc[id](config.elem)){
        doc[id](config.elem).innerHTML = view;
      }
    }
    config.jump && config.jump(config, load);
    
    var elem = doc[id]('layui-laypage-' + config.index);
    that.jump(elem);
    
    if(config.hash && !load){
      // location.hash = '!'+ config.hash +'='+ config.curr;   // 屏蔽掉该行,修改为下一行
      location.hash = location.hash.substr(0,location.hash.indexOf("#!")==-1 ? 99999:location.hash.indexOf("#!")) + '#!'+ config.hash +'='+ config.curr;
    }
    
    that.skip(elem);
  };

另外就是page的渲染中的curr计算,不能根据官方的教程,需要按照如下:

//开启HASH
        laypage.render({
            elem: 'test-laypage-demo5'
            ,count: 500
            //,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
            ,curr: location.hash.indexOf("#!")==-1 ? "" : location.hash.substr(location.hash.indexOf("#!"),).replace('#!fenye=', '')//获取hash值为fenye的当前页
            ,hash: 'fenye' //自定义hash值
        });

相关推荐:

基于layui如何实现无限极联选择器(附代码)

layui form表单的动态渲染与vue.js之间的冲突解决方法(附代码)

以上就是单页面情况下laypage开启时hash的优化方法(代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行