小程序自定义导航二

 

 

{
    "pages": [
        "page/index/index",
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTextStyle": "black",
        "backgroundColor": "#ffffff",
        "navigationStyle": "custom"
    },
    "tabBar": {
        "custom": true,
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
                "pagePath": "page/index/index",
                "iconPath": "image.png",
                "selectedIconPath": "image.png",
                "text": "首页"
            },
            {
                "pagePath": "page/my/my",
                "iconPath": "image.png",
                "selectedIconPath": "image.png",
                "text": "我的"
            }
        ]
    },
    "sitemapLocation": "sitemap.json"
}

新建custom-tab-bar

index.html

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
    <!-- <cover-view class="tab-bar-border"></cover-view> -->
    <cover-view class="footer_nav_box conter">
        <cover-view class="tab_bar_l">
            <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}"
             bindtap="switchTab">
                <cover-image class="pic" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
                <cover-view class="view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
            </cover-view>
        </cover-view>
    </cover-view>
    <cover-view class="footer_nav_shawd"></cover-view>
</cover-view>

index.css 样式不全可自行调节css

.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 59px;
    /* background: white; */
    display: flex;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
}

.conter {
    width: 93%;
    margin: 0 auto;
}

.tab-bar-border {
    background-color: rgba(0, 0, 0, 0.33);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
}

.tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.tab-bar-item .pic {
    width: 46rpx;
    height: 46rpx;
}

.tab-bar-item .view {
    font-size: 20rpx;
    margin-top: 5rpx;
}

index.js

let app = getApp()
Component({
    data: {
        selected: 0,
        color: "#7A7E83",
        selectedColor: "#d6a874",
        list: [{
            pagePath: "/page/index/index",
            iconPath: "/image.png",
            selectedIconPath: "/image.png",
            text: "首页"
        }{
            pagePath: "/page/my/my",
            iconPath: "/image.png",
            selectedIconPath: "/image.png",
            text: "我的"
        }],
    },
})

index.json

{
  "component": true
}