JQ+MUI app 底部导航切换

Love The Way You Lie 2021-09-16 11:38 352阅读 0赞

1.创建文件

index.html

xiaoshipin.html

shangcheng.html

wode.html

footer.html

footer.css

2.每个文件均引入

3.footer.css

.footer {
    	position: fixed;
    	bottom: 0;
    	width: 100%;
    	
    }
    
    #footer_ul {
    	display: flex;
    	padding: 0;
    }
    
    .footer-li {
    	list-style: none;
    	flex: 25%;
        text-align: center;
    }
    
    .footer_ft_color{
    	color: red;
    }

4.initDfault.js 这个文件直接复制粘贴调用footer();即可

// 底部导航方法
    function footer() {
    	$.ajaxSettings.async = false;
    	$("body").append("<div class='footers'></div>");
    	var data = {
    		len: 1,
    		tpl: "footer",
    		dom: ".footers"
    	};
    
    	getMuBan(data.tpl, data.dom);
    
    }
    
    // 跳转方法
    function changeLocation(p) {
    	createNew = true;
    	//跳转动画效果
    	var ani = p.ani ? p.ani : "slide-in-right";
    	mui.openWindow({
    		url: p.page,
    		id: p.id,
    		createNew: createNew,
    		extras: {},
    		show: {
    			autoShow: true, //页面loaded事件发生后自动显示，默认为true
    			aniShow: ani, //页面显示动画，默认为”slide-in-right“；
    		},
    		waiting: {
    			autoShow: false
    		}
    	});
    }
    
    // 获取模板html 参数文件名 
    function getMuBan(tpl, dom) {
    	//获取当前页面名称
    	var cpn = getUrlFileNoExt(location.href);
    	//当选页面替换icon
    	var menuObj = {
    		index: "weizhi",
    		xiaoshipin: "ai-video",
    		shangcheng: "shangcheng",
    		wode: "wode"
    	};
    	//要删除的icon
    	var rmenuObj = {
    		index: "weizhi",
    		xiaoshipin: "ai-video",
    		shangcheng: "shangcheng",
    		wode: "wode"
    	};
    	var str = "../parts/" + tpl + ".html";
    	$(dom).load(str, function() {
    		footerLI(cpn, menuObj, rmenuObj);
    		// 导航点击事件
    		$(document).on("tap", ".footer-li", function() {
    			$('.footer-li').removeClass('footer_ft_color');
    			var listId = $(this).attr("id");
    			var str = "../pages/" + listId + ".html";
    			var p = {
    				id: listId,
    				page: str
    			}
    			changeLocation(p);
    
    		})
    	});
    }
    
    // 改变导航样式
    function footerLI(ids, menuObj, rmenuObj) {
    	$.each(menuObj, function(n, v) {
    		if(ids == n) {
    			//找到对应的key，替换icon
    			var icon = "icon-" + rmenuObj[n];
    			$("#" + ids).addClass("footer_ft_color");
    			$("#" + ids + " div:nth-child(1) .icon").removeClass(icon).addClass("icon-" + v);
    		}
    		if(ids == "") {
    			//lddClient/html/pages/
    			$("#index").addClass("footer_ft_color");
    			$("#index div:nth-child(1) .icon").removeClass('icon-wdwdj1').addClass("icon-wddj1");
    		}
    	})
    }
    
    // 获取当前页面网址
    function getUrlFileNoExt(url) {
    	url = url || location.href;
    	var back = getUrlFileName(url);
    	return back.split(".")[0];
    }
    function getUrlFileName(url) {
    	var tmp = new Array(); //临时变量，用于保存分割字符串
    	tmp = url.split("/"); //按照"/"分割
    	var cc = tmp[tmp.length - 1]; //获取最后一部分，即文件名和参数
    	tmp = cc.split("?"); //把参数和文件名分割开
    	return tmp[0]; //返回值
    }

5.调用

index.html

xiaoshipin.html

shangcheng.html

wode.html

6.模板文件 footer.html