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

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44433499/article/details/115204348