微信小程序重写tabbar底部导航

微信小程序

1.app.js代码如下：

 editTabBar: function() {
        var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.__route__;
        0 != s.indexOf("/") && (s = "/" + s);
        for (var n in e.list) e.list[n].selected = !1, e.list[n].pagePath == s && (e.list[n].selected = !0);
        t.setData({
            tabbar: e
        });
    },
    tabBar: {
        color: "#123",
        selectedColor: "#1ba9ba",
        borderStyle: "#1ba9ba",
        backgroundColor: "#fff",
        list: [ {
            pagePath: "/we7/pages/index/index",
            iconPath: "/we7/resource/icon/home.png",
            selectedIconPath: "/we7/resource/icon/homeselect.png",
            text: "首页"
        }, {
            pagePath: "/we7/pages/user/index/index",
            iconPath: "/we7/resource/icon/user.png",
            selectedIconPath: "/we7/resource/icon/userselect.png",
            text: "我的"
        } ]
    },
    globalData: {
        userInfo: null,
        tabbar: {
            color: "#333",
            selectedColor: "#d0501f",
            backgroundColor: "#ffffff",
            borderStyle: "#d5d5d5",
            list: [ {
                pagePath: "/pages/seller/gzt",
                text: "工作台",
                iconPath: "/pages/images/[email protected]",
                selectedIconPath: "/pages/images/[email protected]",
                selected: !0
            },  {
                pagePath: "/pages/seller/cp/cplb",
                text: "商品",
                iconPath: "/pages/images/dbdc.png",
                selectedIconPath: "/pages/images/dbdcxz.png",
                selected: !1
            }, 
            position: "bottom"
        }
    },

1. template.wxml

<template name="tabbar">
    <view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; border-top-color:{{tabbar.borderStyle}}; {{tabbar.position=='top'?'top:0':'bottom:0'}}">
        <navigator class="tabbar_nav" openType="redirect" style="width:{{1/tabbar.list.length*100}}%; color:{{item.selected?tabbar.selectedColor:tabbar.color}}" url="{{item.pagePath}}" wx:for="{{tabbar.list}}" wx:key="index">
            <image class="tabbar_icon" src="{{item.selected?item.selectedIconPath:item.iconPath}}"></image>
            <text>{{item.text}}</text>
        </navigator>
    </view>
</template>

3.template.wxss

.tabbar_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100rpx;
    border-top: 0.5rpx solid #d5d5d5;
}

.tabbar_nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 25rpx;
    height: 100%;
}

.tabbar_icon {
    width: 40rpx;
    height: 40rpx;
}

• 在需要用的页面(wxml)添加如下代码
• <import src="template.wxml"></import>
<template is="tabbar" data="{{tabbar:tabbar}}"></template>
• 在需要的样式（wxss）添加如下代码
• @import "template.wxss";
• 在需要的js页面添加如下代码：
• var dsq, app = getApp();添加在顶部
• tabbar: {},在data中添加
• app.editTabBar();在onLoad中添加

---