uniapp导航栏添加自定义按钮

添加自定义按钮

注意:按钮的点击事件需要在页面监听onNavigationBarButtonTap事件

页面监听代码如下:

复制代码exportdefault{      data() {return{}      },      onNavigationBarButtonTap() {console.log("点击了自定义按钮");      }  }

pages.json配置如下:

复制代码{"path":"pages/log/log","style": {"navigationBarTitleText":"hello","app-plus": {"titleNView": {"buttons": [{"text":"\ue534","fontSrc":"/static/uni.ttf","fontSize":"22px"}]              }          }      }  }

buttons的text推荐使用字体图标。

如果按钮使用的汉字或英文较长,推荐把字体改小一点,或者调节按钮宽度、padding等值。

配置button的背景颜色为透明:background:'rgba(0,0,0,0)'

自定义按钮带红点和角标

复制代码{"path":"nav-dot/nav-dot","style": {"navigationBarTitleText":"导航栏带红点和角标","app-plus": {"titleNView": {"buttons": [                      {"text":"消息","fontSize":"14","redDot":true},                      {"text":"关注","fontSize":"14","badgeText":"12"}                  ]              }          }      }  }

自定义按钮带下拉选择(城市选择)

复制代码{"path":"nav-city-dropdown/nav-city-dropdown","style": {"navigationBarTitleText":"导航栏带城市选择","app-plus": {"titleNView": {"buttons": [                      {"text":"北京市","fontSize":"14","select":true,"width":"auto"}                  ]              }          }      }  }

导航栏上的原生搜索框

原生导航栏支持放置原生搜索框,可点击直接弹出软键盘,也可以点击后跳转到新页面搜索。

因代码较多,此处不列,请参考hello uni-app的模板-顶部导航标题栏示例。

配置透明渐变导航栏

原生导航栏还支持透明渐变效果,页面刚载入时没有导航标题,页面内容通顶到状态栏里,页面向下滚动后标题栏渐变出现。

复制代码{"path":"pages/log/log","style": {"navigationBarTitleText":"hello","app-plus": {"titleNView": {"type":"transparent"}          }      }  }

实际上可用的titleNView设置还有很多,详细的api见http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

透明渐变的导航栏的button图标有一个默认的灰色背景圈,防止背景图和按钮前景颜色相同导致按钮无法看清。如果要去掉这个灰色背景图,可以配置button的背景颜色为透明:background:'rgba(0,0,0,0)'

导航栏绘制图片

通过在titleNView里配置tags,可以实现导航栏绘制图片的效果:

复制代码{"path":"nav-image/nav-image","style": {"app-plus": {"titleNView": {"titleText":"","tags": [                      {"tag":"img","src":"/static/nav.png","position": {"left":"auto","top":"auto","width":"110px","height":"26px"}                      }                  ]              }          }      }  }

通过配置 tags 除了可以绘制图片,还可以绘制更多丰富的内容,如:richtext(富文本)、font(文本)、input(输入框)、rect(矩形区域)。详情参考:titleNViewtags

通过setStyle方式动态修改导航栏样式

如果需要js动态修改导航栏,uni有跨端的api可修改标题、背景色、前景色。这部分是app、小程序、h5都支持的,参考https://uniapp.dcloud.io/api/ui/navigationbar

对于app侧扩展的设置,比如自己添加的buttons,则需使用plus的js api来动态设置。在App端可以通过得到webview对象,通过setStyle方法重新设置,包括修改webview对象的titleNview属性,以达到修改标题栏按钮文字及样式的功能。

具体参考:https://ask.dcloud.net.cn/article/35374

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • “他们都太忙了,没有时间培养爱好”当我听到这句话时,想到了父母,他们真的太忙了,把自己的爱好都放弃了。 从小就感觉...
    余闲鱼阅读 545评论 0 1
  • 文Ⅰ茄子 图Ⅰ网络 听说,冬天之所以那么冷,是为了告诉大家身边人的温暖是多么的重要。 之前看了一部韩国的电影——...
    Z追远阅读 391评论 0 7
  • 长征路上第一张单独和一个孩子的自拍合影 这个孩子叫小安心,看到她第一眼,就不由心生怜爱…… 拍照后得知小安心是孤儿...
    寒冰0601阅读 154评论 0 0
  • 其实是一篇“混淆”的读书笔记,讲讲自己最近读的书.读书笔记:移动的帝国_日本移动互联网兴衰启示录 转自http:/...
    Sstructure阅读 905评论 0 0
  • 上次有一个客户是做家具行业,知道互联网+时代,想做网络营销,不知道如何去做,百度跟360还有诚信通打了很多次电话,...
    企邦在线阅读 355评论 0 0