uni-app 自定义导航栏图片按钮-蒲公英云

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

叁歲伎倆 2022-11-13 04:09 611阅读 0赞

在这里插入图片描述
按钮据右边边框距离设置：

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"
                }]
            }
        }