uniapp导航栏添加⾃定义按钮
添加⾃定义按钮
注意：按钮的点击事件需要在页⾯监听onNavigationBarButtonTap事件
页⾯监听代码如下：
复制代码exportdefault{      data() {return{}      },      onNavigationBarButtonTap() {console.log("点击了⾃定义按钮");      }  }
pages.json配置如下：
复制代码{"path":"pages/log/log","style": {"navigationBarTitleText":"hello","app-plus": {"titleNView": {"buttons":
[{"text":"\ue534","fontSrc":"/f","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"}                  ]              }        }      }  }
导航栏上的原⽣搜索框
js导航栏下拉菜单原⽣导航栏⽀持放置原⽣搜索框，可点击直接弹出软键盘，也可以点击后跳转到新页⾯搜索。
因代码较多，此处不列，请参考hello uni-app的模板-顶部导航标题栏⽰例。
配置透明渐变导航栏
原⽣导航栏还⽀持透明渐变效果，页⾯刚载⼊时没有导航标题，页⾯内容通顶到状态栏⾥，页⾯向下滚动后标题栏渐变出现。
复制代码{"path":"pages/log/log","style": {"navigationBarTitleText":"hello","app-plus": {"titleNView": {"type":"transparent"}          }    }  }
透明渐变的导航栏的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（矩形区域）。详情参考：titleNView、tags。
通过setStyle⽅式动态修改导航栏样式
对于app侧扩展的设置，⽐如⾃⼰添加的buttons，则需使⽤plus的js api来动态设置。在App端可以通过得到webview对象，通过setStyle⽅法重新设置，包括修改webview对象的titleNview属性，以达到修改标题栏按钮⽂字及样式的功能。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。