小程序自定义tabBar，uniapp自定义tabBar_uni.settabbarstyle怎么更换小程序tabar的icon

cover-view
覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。
注意：只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。

1、支持background-color，不支持background-image，如果你发现你的素材在真机出不来，而且你又设置了背景图片的话，那你可以把这些元素全部替换成cover-image。

2、不支持overflow: visible也是有点坑，这样的话，你想超出依然显示，就需要设置一个同级元素并提升层级才能达到效果了。

3、如果里面有cover-image超出\溢出的话不显示会剪切掉，具体放大外部cover-view，里面做外边距（margin）调整

cover-image
覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
cover-image发现了两个问题：
1、虽说和image组件基本一样，但是设置mode属性也就是图片裁剪、缩放的模式无效
2、宽度固定，高度auto，时，按照正常效果应该是图片按比例伸缩展示，但是发现该组件高度一直为0，只能根据应用场景寻找其他替代方案了。

---

闲聊：一般自定义底部导航基本都是中间有个另类的需求，如：拍照，扫码，发布之类的直接入口

          这里解释下官方提供的自定义custom-tab-bar 只需要自定义重新写样式就可以了，本文提供的是非官方自己写的

---

开发小程序中有时候会遇到比较“奇葩”的需求，tabBar突出（一般是拍照或者扫码类的）这时候原生的tabBar就无法使用了，需要自定义Component (tabBar)

---

正文

如果需要使用自定义tabbar的话，app.json需要设置tabBar值

app.json 代码供参考

"tabBar": {
        "custom":true,
        "color": "#999999",
        "selectedColor":"#333333",
        "borderStyle":"black",
        "backgroundColor":"",
        "list": [
            {
                "pagePath": "pages/shopList/shopList",
                "iconPath": "/img/img/na04.png",
                "selectedIconPath": "/img/img/na04s.png",
                "color": "#999999",
                "selectColor": "#333333",
                "text": ""
            },
            {
                "pagePath": "pages/index/index",
                "iconPath": "/img/img/na02.png",
                "selectedIconPath": "/img/img/na02s.png",
                "color": "#999999",
                "selectColor": "#333333",
                "text": ""
            },
            {
                "pagePath": "pages/helpCenter/helpCenter",
                "iconPath": "/img/img/icon_saomia.png",
                "selectedIconPath": "/img/img/icon_saomia.png",
                "color": "#999999",
                "selectColor": "#333333",
                "text": ""
            },
            {
                "pagePath": "pages/helpCenter/helpCenter",
                "iconPath": "/img/img/na01.png",
                "selectedIconPath": "/img/img/na01s.png",
                "color": "#999999",
                "selectColor": "#333333",
                "text": ""
            },
            {
                "pagePath": "pages/user/user",
                "iconPath": "/img/img/na03.png",
                "selectedIconPath": "/img/img/na03s.png",
                "color": "#999999",
                "selectColor": "#333333",
                "text": ""
            }
        ]
    },

注："custom":true  使用自定义tabBar 的话 "custom" 值必须为true

---

先贴wxml代码部分，在来讲讲为啥要使用cover-view来做tabBar而不是使用view

<cover-view class="tab-bar" id='tabBars' ref='tabBars' style="height:{{isIphomex?'240rpx':'172rpx'}}">
    <cover-image src="/img/img/nav_bg.png" class="tab-bar-back"></cover-image>
    <cover-view class="fixeds" style="height:{{isIphomex?'240rpx':'172rpx'}}">
        <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{index==2?'tab-bar-yixing':'tab-bar-yixingNo'}}" data-paths="{{item.pagePath}}" data-indexsels="{{index}}" bindtap="switchTab" style="padding-bottom:{{isIphomex?'68rpx':'0'}}">
            <cover-view class="viewImg">
                <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
            </cover-view>
            <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
        </cover-view>
        <cover-view class="absout" wx:if='{{isIphomex}}'></cover-view>
    </cover-view>
</cover-view>
<!-- <view class="tab-bar" style="height:{{isIphomex?'240rpx':'172rpx'}}" wx:else>
    <image src="/img/img/nav_bg.png" class="tab-bar-back"></image>
    <view class="fixeds" style="height:{{isIphomex?'240rpx':'172rpx'}}">
        <view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{index==2?'tab-bar-yixing':'tab-bar-yixingNo'}}" data-paths="{{item.pagePath}}" data-indexsels="{{index}}" bindtap="switchTab" style="padding-bottom:{{isIphomex?'68rpx':'0'}}">
            <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
            <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
            <view class="absout" wx:if='{{selected==1&&isIphomex}}'></view>
        </view>
    </view>
</view> -->

因为在底部的4个tab页面 有一个是地图MAP原生组件，而在微信版本7.0.5以下版本是无法使用view的，7.0.5以上包括7.0.5不受限制，亲测7.0.5版本以上包括7.0.5版本在map原生组件情况下是可以使用view的。具体详见小程序原生组件，在当前没有地图模块时建议使用view 去做，因为view去写界面的话会对iPhoneX及以上的非常规屏很好的兼容性，而cover-view由于不支持border单边、fixed的左右对齐之类的等等，详见 cover-view的 BUG&TIP第11条

---

wxss部分

.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 172rpx;
    display: flex;
    /* padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom); */
    z-index: 0;
}
 
.tab-bar-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 172rpx;
    z-index: 1;
}
 
.fixeds {
    display: flex;
    /* padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom); */
    width: 100vw;
    justify-content: space-between;
    align-items: flex-end;
    height: 172rpx;
    position: relative;
    z-index: 2;
}
 
.tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 98rpx;
    color: #999;
    background-color: #fff;
}
 
.tab-bar-item cover-image {
    width: 46rpx;
    height: 46rpx;
}
.tab-bar-item image {
    width: 46rpx;
    height: 46rpx;
}
 
.tab-bar-yixing {
    height: 172rpx;
    position: relative;
    z-index: 0;
    border-radius: 144rpx
}
.tab-bar-yixing cover-image {
    width: 144rpx;
    height: 144rpx;
    position: relative;
    z-index: 6;
    border-radius: 144rpx;
}
.viewImg{
    margin-bottom: 6rpx; 
}
.tab-bar-yixing .viewImg{
    width: 144rpx;
    height: 144rpx;
    margin-bottom:18rpx;
    position: relative;
    z-index: 6;
    border-radius: 144rpx;
    overflow: hidden;
}
.tab-bar-yixing image {
    width: 144rpx;
    height: 144rpx;
    margin-bottom:24rpx;
    position: relative;
    z-index: 6;
}
.absout{
    position: fixed;
    z-index: 3;
    width: 100%;
    height: 80rpx;
    bottom: 0;
    background-color: #ffffff;
}
.tab-bar-item cover-view {
    font-size: 10px;
}
.tab-bar-item view {
    font-size: 10px;
}

注：padding-bottom: constant(safe-area-inset-bottom);在使用cover-view模式下IphoneX及以上机型底部会留空白，所以我注释掉了，采用了一个底部80的高度白底的cover-view遮盖

---

js的部分代码

Component({
    data: {
        isIphomex: app.upVersions(),
        selected: 0,
        color: "#999999",
        selectedColor: "#333333",
        list:[],
    },
    attached() {
        this.setData({
            list: [{
                pagePath: "/pages/shopList/shopList",
                iconPath: "/img/img/na04.png",
                selectedIconPath: "/img/img/na04s.png",
                color: '#999999',
                selectedColor: '#333333',
                text: 首页
            }, {
                pagePath: "/pages/index/index",
                iconPath: "/img/img/na02.png",
                selectedIconPath: "/img/img/na02s.png",
                color: '#999999',
                selectedColor: '#333333',
                    text: 地图
            }, {
                pagePath: "/pages/helpCenter/helpCenter",
                iconPath: "/img/img/icon_saomia.png",
                selectedIconPath: "/img/img/icon_saomia.png",
                color: '#999999',
                selectedColor: '#333333',
                text: "" // 扫码非人类设计突出的部分
            }, {
                pagePath: "/pages/shopCat/index",
                iconPath: "/img/img/na01.png",
                selectedIconPath: "/img/img/na01s.png",
                color: '#999999',
                selectedColor: '#333333',
                    text: 购物车
            }, {
                pagePath: "/pages/user/user",
                iconPath: "/img/img/na03.png",
                selectedIconPath: "/img/img/na03s.png",
                color: '#999999',
                selectedColor: '#333333',
                    text: 个人中心
            }]
        })
    },
    methods: {
        switchTab(e) {
            const data = e.currentTarget.dataset
            const url = data.paths
            if (data.indexsels != 2) {
                wx.switchTab({ url });
                this.setData({ selected: data.indexsels })
            } else {
                wx.scanCode({
                    success: (res) => {
                        if (res.errMsg == "scanCode:ok") {
                            // 扫码成功
                        } else {}
                    },
                    fail: err => {
                        console.log("扫描err:" + JSON.stringify(err));
                    }
                })
            }
 
        }
    }
})

JSON文件里面  设置

{
"component": true
}

app.upVersions() 为当前封装的公共部分的判断当前用户手持终端设备是否是iPhoneX及以上机型，具体详见下方upVersions函数

注：官方提供的 只需要使用这圈住的if这段，放在四个页面的onShow 函数生命周期里，selected为当前选中的，底部的页面都需要写，哪个点击带入的就是哪个0-4，扫码或拍照的不设置

---

判断机型upVersions函数

/**
 * 判断获取当前机型是否是iPhoneX及以上机型
 */ 
upVersions()=> { 
        let tmps = ['iPhone X', 'iPhone 11'], flag= false;
        for (let i in tmps) {
            // 微信版本
            if (wx.getSystemInfoSync().model.search(tmps[i]) > -1) {
                flag = true
                break;
            }
            // uniapp版本
            if (uni.getSystemInfoSync().model.search(tmps[i]) > -1) {
                flag = true
                break;
            }
        }
        return flag
    },

---

参考官方 tabBar 自定义