手机端模拟文件管理实现面包屑导航功能

2018年七月份开始手机端web项目，其中一个模拟手机文件管理功能实现pdf文件展示和预览，类似于这种面包屑导航的功能
对于大神来说可能不难，不管怎么样做个记录，保留一下劳动成果。
HTML部分（引用了mui的样式）：

<div id="allFile" class="mui-slider-item mui-control-content">
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
        <ul class="breadNav"></ul>
        <ul class="allfileList"></ul>
        <div class="divNull">没有文件</div>
        </div>
    </div>
  </div>

JS部分：

//初始化请求根展示文件夹
function showRoot(){
    mui.ajax({
        url:XXXX+"?parentId=0",
        type:"get",
        beforeSend:function(){
            //添加请求等待的样式
            waitImg.style.display="block";
        },
        success:function(res){
            //隐藏请求等待的样式
            waitImg.style.display="none";
            if(res.code==0){
                var data=res.catalogs;
                //渲染文件列表
                if(data.length!=0){
                    showFilebox(data);
                }else{
                    mui(".divNull")[0].style.display="block";
                    mui('.allfileList')[0].innerHTML="";
                }
            }
        },
        error:function(){
            waitImg.style.display="none";
            mui.toast("请求失败");
        }
    }); 
};
showRoot();
//点击文件夹进入子文件夹
mui(".allfileList").on("tap",".fileList",function() {
    var thatType=this.getAttribute("type");
    mui(".divNull")[0].style.display="none";
    if(thatType==0){  //thatType==0表示文件夹
        mui(".breadNav")[0].style.display="block";
        mui(".allfileList")[0].style.paddingTop="0";
        var that_val=this.getAttribute("value");
        var that_id=this.id;
        mui.ajax({
            url:queryByParentId+"?parentId="+that_id,
            type:"get",
            beforeSend:function(){
                waitImg.style.display="block";
            },
            success:function(res){
                waitImg.style.display="none";
                if(res.code==0){
                    var data=res.catalogs;
                    //设置面包屑导航
                    if(mui(".breadNav li").length==0){
                        //点击根目录时增加根目录导航
                        var rootLi=document.createElement("li");
                        rootLi.innerHTML="根目录";
                        rootLi.className="breadNav-item";
                        rootLi.classList.add("rootLi");
                        mui('.breadNav')[0].appendChild(rootLi);
                        var breadRight=document.createElement("li");
                        breadRight.className="right-icon";
                        breadRight.classList.add("mui-icon");
                        breadRight.classList.add("mui-icon-arrowright");
                        mui('.breadNav')[0].appendChild(breadRight);
                    }
                    var breadLi=document.createElement("li");
                    breadLi.className="breadNav-item";
                    breadLi.setAttribute("id",that_id);
                    breadLi.classList.add("breadnavLi");
                    breadLi.innerHTML=that_val;
                    mui('.breadNav')[0].appendChild(breadLi);
                    var breadRight=document.createElement("li");
                    breadRight.className="right-icon";
                    breadRight.classList.add("mui-icon");
                    breadRight.classList.add("mui-icon-arrowright");
                    mui('.breadNav')[0].appendChild(breadRight);
                    //渲染文件列表
                    if(data.length!=0){
                        showFilebox(data);
                    }else{
                        mui(".divNull")[0].style.display="block";
                        mui('.allfileList')[0].innerHTML="";
                    }

                }
            }
        })
    }else{
        //如果是文件点击则预览
        sessionStorage["filePath"]=this.id;
        sessionStorage["fileName"]=this.innerHTML;
        var htmls=mui(".breadNav")[0].innerHTML;
        sessionStorage["htmls"]=htmls;
        mui.openWindow({
            url:"pdfView.html"
        });
    }
});
//点击根文件导航回到根
mui(".breadNav").on("tap",".rootLi",function(){
    mui(".breadNav")[0].innerHTML="";
    mui(".divNull")[0].style.display="none";
    showRoot();
});
//面包屑导航点击
mui(".breadNav").on("tap",".breadnavLi",function(){
    mui(".divNull")[0].style.display="none";
    var _that=this;
    mui.ajax({
        url:queryByParentId+"?parentId="+this.id,
        type:"get",
        beforeSend:function(){
            waitImg.style.display="block";
        },
        success:function(res){
            waitImg.style.display="none";
            if(res.code==0){
                var data=res.catalogs;
                //更新面包屑导航
                siblings(_that);
                //渲染文件列表
                if(data.length!=0){
                    showFilebox(data);
                }else{
                    mui(".divNull")[0].style.display="block";
                    mui('.allfileList')[0].innerHTML="";
                }
            }
        }
    })
});
//查找当前点击的导航的后面节点并删除
function siblings(elm) {
    var a =10000000000;
    var b;
    var flag=true;
    var n=false;
    var p = elm.parentNode.children;
    for(var i =0,pl= p.length;i<pl;i++) {
        if(p[i]== elm){
            a=i+1;
        };
        if(flag){
            if(i>a){
                b=i;
                flag=false;
            }
        }
        if(i>a){
            elm.parentNode.removeChild(p[b]);   
        }
    }
}
function showFilebox(data){
    //渲染文件列表
    document.getElementsByClassName("allfileList")[0].innerHTML="";
    for(var j=0;j<data.length;j++){
        var li=document.createElement("li");
        li.className="mui-table-view-cell";
        li.classList.add("fileList");
        if(data[j].url==""){
            li.setAttribute("id",data[j].id);
        }else{
            li.setAttribute("id",data[j].url);
        } 
        li.setAttribute("value",data[j].name);
        li.setAttribute("type",data[j].type);
        var icon=document.createElement("span");
        icon.className="iconFileall";
        if(j%4=="0"){
            li.style.borderLeft="5px solid #3CC3F9";
            if(data[j].type=="0"){
                icon.style.backgroundImage="url(/environment_wx/img/A.png)";
            }else{
                icon.style.backgroundImage="url(/environment_wx/img/A-1.png)";
            }
        }else if(j%4=="1"){
            li.style.borderLeft="5px solid #FB7D76";
            if(data[j].type=="0"){
                icon.style.backgroundImage="url(/environment_wx/img/B.png)";
            }else{
                icon.style.backgroundImage="url(/environment_wx/img/B-1.png)";
            }
        }else if(j%4=="2"){
            li.style.borderLeft="5px solid #FFBC7B";
            if(data[j].type=="0"){
                icon.style.backgroundImage="url(/environment_wx/img/C.png)";
            }else{
                icon.style.backgroundImage="url(/environment_wx/img/C-1.png)";
            }
        }else if(j%4=="3"){
            li.style.borderLeft="5px solid #29D2B4";
            if(data[j].type=="0"){
                icon.style.backgroundImage="url(/environment_wx/img/D.png)";
            }else{
                icon.style.backgroundImage="url(/environment_wx/img/D-1.png)";
            }
        }
        li.appendChild(icon);
        var word=document.createElement("span");
        word.innerHTML=data[j].name;
        li.appendChild(word);
        mui(".allfileList")[0].appendChild(li);
    }
}

最终效果：