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.呼叫

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>