uni-app 自定义导航栏 图片按钮

在这里插入图片描述

按钮据右边边框距离设置：

    document.getElementsByClassName('uni-btn-icon')[2].style.marginRight = '22px'

监听按钮状态：

    onNavigationBarButtonTap(e) {
            if (e.index === 1|| e.index === 2) {
                this.isfilter = !this.isfilter
                if (this.isfilter == false) {
                    document.getElementsByClassName('uni-btn-icon')[3].innerText = '筛选';
                    document.getElementsByClassName('uni-btn-icon')[2].style.color = '#333333'
                    document.getElementsByClassName('uni-btn-icon')[3].style.color = '#333333'
                } else {
                    document.getElementsByClassName('uni-btn-icon')[3].innerText = '已筛选';
                    document.getElementsByClassName('uni-btn-icon')[2].style.color = '#E86951'
                    document.getElementsByClassName('uni-btn-icon')[3].style.color = '#E86951'
                }
            }else if(e.index == 0){
                uni.switchTab({
                    url
                })
            }
            
        }

page.json

    "app-plus": {
        "titleNView": {
                "titleColor": "#333333",
                "backgroundColor": "#FFFFFF",
                "buttons": [{
                    "type":"back",
                    "fontSize": "27px",
                    "float": "left"
                },
                {
                    "fontSrc": "/static/iconfont/iconfont.ttf",
                    "text": "\ue732",
                    "fontSize": "27px",
                    "margin":"30upx",
                    "width":"auto"
                },{
                    "text": "筛选",
                    "fontSize": "14px",
                    "width":"auto"
                }]
            }
        }

在这里插入图片描述