526互联

uni-app 原生导航栏相关设置

发布时间 2023-09-22 03:36:37作者: 完美前端

原生导航设置buttons时候监听点击事件

{
  "path": "pages/user/uses",
  "style": {
    "app-plus": {
      "bounce": "none",
      "titleNView": {
        "buttons": [
          {"text": "分享"},
          {"text": "分享22"},
          {"text": "分享233"}
        ],
        "backButton": {
          "background": "#00FF00"
        }
      }
    }
  }
},

监听
import { onReady } from '@dcloudio/uni-app'
onNavigationBarButtonTap( (e) => {
  console.log (1111111)
  console.log (e)
})


 
// 透明渐变导航栏
"style": {
  "navigationBarTitleText": "透明渐变导航栏",
      "transparentTitle": "auto"
}

// 中间图片导航栏
"style": {
  "navigationBarBackgroundColor": "#FFFFFF",
      "navigationBarTextStyle": "black",
      "titleImage": "https://web-assets.dcloud.net.cn/unidoc/zh/logo1@2x.png"
}

// 导航栏带红点和角标
"app-plus": {
  "titleNView": {
    "buttons": [{
      "text": "消息",
      "fontSize": "14",
      "redDot": true
    },
      {
        "text": "关注",
        "fontSize": "14",
        "badgeText": "12"
      }
    ]
  }
}

// 导航栏带搜索框
"app-plus": {
  "titleNView": {
    "type": "transparent",
        "titleColor": "#fff",
        "backgroundColor": "#007AFF",
        "buttons": [{
      "fontSrc": "/static/uni.ttf",
      "text": "\ue537",
      "width": "40px",
      "fontSize": "28px",
      "color": "#fff",
      "background": "rgba(0,0,0,0)"
    }],
        "searchInput": {
      "backgroundColor": "#fff",
          "borderRadius": "6px",
          "placeholder": "请输入地址 如：大钟寺",
          "disabled": true
    }
  }

// 导航栏带城市选择
"app-plus": {
  "titleNView": {
    "buttons": [{
      "text": "北京市",
      "fontSize": "14",
      "select": true,
      "width": "auto"
    }]
  }
}

原生导航栏设置

 uni.setNavigationBarTitle({
    title: '请设置支付密码'
  })
 uni.setNavigationBarColor({
    frontColor: '#000000', // 前景颜色值，仅支持 #ffffff 和 #000000
    backgroundColor: '#eebf94', // 背景颜色值
    success: function() {
      console.log('状态栏颜色已更改!');
    },
    fail: function(err) {
      console.error('更改状态栏颜色失败:', err);
    }
  });

还可以
"style": {
        "navigationBarTitleText": "2222",
        "app-plus": {
          "bounce": "none",
          "titleNView": {
            "titleColor": "#f02656",
            "buttons": [
              {"text": "分享", "fontSize": "20rpx"}
            ],
            "backButton": {
              "background": "#00FF00"
            }
          }
        }