JQ+MUI app 底部导航切换

1.创建文件

index.html

xiaoshipin.html

shangcheng.html

wode.html

footer.html

footer.css

2.每个文件均引入

<link rel="stylesheet" href="../../css/common/mui.min.css" />
    <link rel="stylesheet" href="../../css/common/iconfont.css" />
    <link rel="stylesheet" href="../../css/common/footer.css" />

<script type="text/javascript" src="../../js/common/jquery-3.2.1.min.js" ></script>
	<script type="text/javascript" src="../../js/common/mui.js" ></script>
	<script type="text/javascript" src="../../js/common/initDfault.js" ></script>

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.调用

扫描二维码关注公众号，回复： 4712388 查看本文章

index.html

xiaoshipin.html

shangcheng.html

wode.html

<script>
		footer();
	</script>

6.模板文件 footer.html

<footer class="footer">
    <ul id="footer_ul">
        <li id="index" class="footer-li" >
            <span class="jump">
                <div class="" >
                    <i class="icon iconfont icon-weizhi" style="font-size: 34px !important;"></i>
                </div>
                <div>身边</div> 
            </span>

        </li>
        <li id="xiaoshipin" class="footer-li" >
            <span class="jump">
            <div class="" >
                <i class="icon iconfont icon-ai-video" style="font-size: 34px !important;"></i>
            </div>
            <div>小视频</div>
                </span>
        </li>
        <li id="shangcheng" class="footer-li" >
            <span class="jump">
            <div class="" >
                <i class="icon iconfont icon-shangcheng" style="font-size: 34px !important;"></i>
            </div>
            <div>商城</div>
                </span>
        </li>
        <li id="wode" class="footer-li">
            <span class="jump">
            <div class=""  >
                <i class="icon iconfont icon-wode" style="font-size: 34px !important;font-weight: 600;"></i>
            </div>
            <div>我的</div>
                </span>
        </li>
    </ul>
</footer>