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

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

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

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

监听按钮状态:

  1. onNavigationBarButtonTap(e) {
  2. if (e.index === 1|| e.index === 2) {
  3. this.isfilter = !this.isfilter
  4. if (this.isfilter == false) {
  5. document.getElementsByClassName('uni-btn-icon')[3].innerText = '筛选';
  6. document.getElementsByClassName('uni-btn-icon')[2].style.color = '#333333'
  7. document.getElementsByClassName('uni-btn-icon')[3].style.color = '#333333'
  8. } else {
  9. document.getElementsByClassName('uni-btn-icon')[3].innerText = '已筛选';
  10. document.getElementsByClassName('uni-btn-icon')[2].style.color = '#E86951'
  11. document.getElementsByClassName('uni-btn-icon')[3].style.color = '#E86951'
  12. }
  13. }else if(e.index == 0){
  14. uni.switchTab({
  15. url
  16. })
  17. }
  18. }

page.json

  1. "app-plus": {
  2. "titleNView": {
  3. "titleColor": "#333333",
  4. "backgroundColor": "#FFFFFF",
  5. "buttons": [{
  6. "type":"back",
  7. "fontSize": "27px",
  8. "float": "left"
  9. },
  10. {
  11. "fontSrc": "/static/iconfont/iconfont.ttf",
  12. "text": "\ue732",
  13. "fontSize": "27px",
  14. "margin":"30upx",
  15. "width":"auto"
  16. },{
  17. "text": "筛选",
  18. "fontSize": "14px",
  19. "width":"auto"
  20. }]
  21. }
  22. }

在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,611人围观)

还没有评论,来说两句吧...

相关阅读