JQ+MUI app 底部导航切换-蒲公英云

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

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>