手机端模拟文件管理实现面包屑导航功能
2018年七月份开始手机端web项目，其中一个模拟手机文件管理功能实现pdf文件展示和预览，类似于这种面包屑导航的功能
对于大神来说可能不难，不管怎么样做个记录，保留一下劳动成果。
HTML部分（引用了mui的样式）：
<div id="allFile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
class="breadNav">
class="allfileList">
<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;iif(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;jvar 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);
}
} 最终效果：
