欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uni 自定义导航条文字、文字图标按钮及点击按钮的事件

程序员文章站 2022-07-13 12:40:15
...

uni 自定义导航条文字、文字图标按钮及点击按钮的事件

{
      "path": "pages/off-line/off-line-details/off-line-details",
      "style": {
        "navigationBarTitleText": "线下活动详情",
        "navigationBarBackgroundColor": "#fff",
        "app-plus": {
          "bounce": "none",
          "titleNView": {
            "titleColor": "#333",
            "titleSize": "36upx",
            "titleText": "线下活动详情",
            "splitLine": true,
            "buttons": [{
              "text": "发布",
              "fontSize": "42upx",
              "float": "right",
              "color": "#333333"
            }]
          }
        }
      }
    }

buttons 下面是设置文字按钮的地方
buttons > text 文字按钮的内容 color 文字的颜色 fontSize 文字的大小 float 显示的地方

自定义 导航条图标按钮

{
   "path": "pages/off-line/off-line-details/off-line-details",
   "style": {
     "navigationBarTitleText": "线下活动详情",
     "navigationBarBackgroundColor": "#fff",
     "app-plus": {
       "bounce": "none",
       "titleNView": {
         "titleColor": "#333",
         "titleSize": "36upx",
         "titleText": "线下活动详情",
         "splitLine": true,
         "buttons": [{
           "text": "\ue6c1",
           "fontSize": "42upx",
           "float": "right",
           "color": "#333333",
           "fontSrc": "/static/iconfont.ttf"
         }]
       }
     }
   }
 }

buttons 下面是设置字体图标按钮的地方
首先要去iconfont生成 .ttf的文件 放入静态资源 static下面
buttons > text 文字按钮的内容
color 文字的颜色 fontSize 文字的大小
float 显示的地方
fontWeight 按钮上文字的粗细。可取值"normal"-标准字体、“bold”-加粗字体。

text 按钮上显示的文字。使用字体图标时 unicode 字符表示必须 ‘\u’ 开头,如 “\ue123”(注意不能写成"\e123")。

fontSize 按钮上文字使用的字体文件路径。不支持网络地址,请统一使用本地地址。

width 按钮的宽度,可取值: “*px” - 逻辑像素值,如"10px"表示10逻辑像素值,不支持rpx。按钮的内容居中显示; “auto” - 自定计算宽度,根据内容自动调整按钮宽度

导航条 图标点击事件 ps:不能写到 methods 里面

  onNavigationBarButtonTap(e) {
  	 console.log(“按钮点击事件”)
  }
相关标签: javascript