Optimization method of hash when laypage is turned on in a single page (code)

The content of this article is about the hash optimization method (code) when the laypage is turned on in a single page. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When the layout page is on a single page, turning on the hash on the laypage will flush out the previous hash

Solution ideas, adjust the hash jump method and the curr calculation method

The subsequent hash will This is the case #/data/tiebaluntan#!page=98

There are two places to modify:

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);
  };

The other is the rendering of the page The calculation of curr cannot be based on the official tutorial. You need to follow the following:

//开启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值
        });

Related recommendations:

How to implement the Infinity Selector based on layui (with code)

Conflict resolution between dynamic rendering of layui form and vue.js (with code)

The above is the detailed content of Optimization method of hash when laypage is turned on in a single page (code). For more information, please follow other related articles on the PHP Chinese website!