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

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

![在这里插入图片描述][20210325114207704.png]  
按钮据右边边框距离设置：

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

![在这里插入图片描述][20210325114639114.png]

[20210325114207704.png]: /images/20221022/3b546c84d4494bdd9d9ca2f8e69bbda9.png
[20210325114639114.png]: /images/20221022/3ea676230424471ea4b656b507c5905b.png