Navber导航栏

引入

在app.json或index.json中引入组件，默认为ES6版本。注意：导航栏样式设置为custom 自定义导航栏，只保留右上角胶囊按钮。

      "usingComponents": {
   "vtu-navbar": "/miniprogram_npm/vtuweapp/navbar/vtu-navbar"
}
    

代码演示

普通居左

<vtu-navbar title="Navbar" goHome="{{false}}" title-align="left"></vtu-navbar>
      

带HOME居中

<vtu-navbar title="Navbar"></vtu-navbar>
      

居中带文字

<vtu-navbar title="Navbar" back-label="返回" goHome="{{false}}"></vtu-navbar>
      

改变背景色

<vtu-navbar title="Navbar" homeStyle="cachet" bgColor="#000" fontColor="#ffffff" icon="iconfont icon-shangchuan"></vtu-navbar>
      

背景自定义

<vtu-navbar title="Navbar" homeStyle="cachet" navbar-class="style4NavBar" homebar-class="style4HomeBar" fontColor="#fff"></vtu-navbar>
      

搜索样式

<vtu-navbar use-bar-slot show-nav-btn="{{false}}"
            navbar-class="style4NavBar"
            homebar-class="style4HomeBar"
            fontColor="#fff"
            bind:load="headLoad">
  <view class="searchImg iconfont icon-share"></view>
  <view class="searchPanel">
    <view class="searchPanel_icon iconfont icon-sousuo"></view>
    <view class="searchPanel_input">
      <input placeholder="请输入关键字" />
    </view>
  </view>
</vtu-navbar>
      

导航样式

<vtu-navbar use-bar-slot show-nav-btn="{{false}}" fontColor="#fff">
  <vtu-tabs value="{{tabValue}}"
            custom-class="tabClass" color="#606266"
            tab-active-class="tabActiveClass"
            is-average="{{false}}"
            line="{{false}}"
            border="{{false}}"
            fill="{{true}}">
    <vtu-tab label="精选" name="name1"></vtu-tab>
    <vtu-tab label="电影" name="name2"></vtu-tab>
    <vtu-tab label="电视剧" name="name3"></vtu-tab>
    <vtu-tab label="电影" name="name4"></vtu-tab>
    <vtu-tab label="综艺" name="name5"></vtu-tab>
    <vtu-tab label="少儿" name="name6"></vtu-tab>
  </vtu-tabs>
</vtu-navbar>

      

首页样式

<vtu-navbar title="我的" show-nav-btn="{{false}}" title-align="left"></vtu-navbar>
      

组件参数

Props

外部样式类