小程序 自定义导航

  • 自定义顶部导航

    上一章节我们使用 window 设置小程序的导航条、标题、窗口背景色。
    想要自定义某个页面的顶部导航栏,我们只需要在对应的页面的json文件里添加参数 "navigationStyle": "custom" 设置即可:
    //order.json
    {
    "usingComponents": {},
    "navigationStyle": "custom"
    }
    
    然后我们在order.wxml下定义我们的导航结构:
    //order.wxml
    <view class="order-nav">
        <view>订单</view>
    </view>
    <view>我是订单页面</view>
    
    最后我们在order.wxss下编写我们的导航结构样式:
    //order.wxss
    .order-nav{
      width: 100%;
      height: 64px;
      text-align: center;
      color: #fff;
      background: #45A844;
      box-sizing: border-box;
    }
    .order-nav view{
      padding-top:20px;
      line-height: 44px;
    }
    
    基于iPhone6尺寸在真机渲染导航高度是电量条20px+导航条40px=64px
    编译结果如下:
    导航
  • 自定义底部导航

    自定义 tabBar 导航需要在app.json文件里添加参数 "custom": true 设置即可开启:
    //app.json
    "tabBar": {
      "color": "#333",  //文字颜色
      "custom": true,  //开启自定义 tabBar
      "selectedColor": "#45A844",  //选中文字颜色
      "backgroundColor": "#ffffff", //导航背景色
      "borderStyle": "white", //tabbar 上边框的颜色,仅支持 black / white
      "list": [
        {
          "pagePath": "pages/index/index",  //对应的页面
          "iconPath": "images/shouye_default.png",  //默认的图标
          "selectedIconPath": "images/shouye.png",  //选中高亮的图标
          "text": "首页"
        },
        {
          "pagePath": "pages/order/order",
          "iconPath": "images/dingdan.png",
          "selectedIconPath": "images/dingdan_check.png",
          "text": "订单"
        },
        {
          "pagePath": "pages/user/user",
          "iconPath": "images/wode.png",
          "selectedIconPath": "images/wode_check.png",
          "text": "我的"
        }
      ]
    }
    
    然后我们新建一个文件命名为 custom-tab-bar
    在代码根目录下添加入口文件:
    • custom-tab-bar/index.js
    • custom-tab-bar/index.json
    • custom-tab-bar/index.wxml
    • custom-tab-bar/index.wxss
    用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例。
    custom-tab-bar/index.wxml 代码如下:
    //index.wxml
    <cover-view class="tab-bar">
      <cover-view class="tab-bar-border"></cover-view>
      <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
        <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
        <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
      </cover-view>
    </cover-view>
    
    custom-tab-bar/index.wxss 代码如下:
    //index.wxss
    .tab-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      background: white;
      display: flex;
      padding-bottom: env(safe-area-inset-bottom);
    }
    
    .tab-bar-border {
      background-color: rgba(0, 0, 0, 0.33);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
    }
    
    .tab-bar-item {
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    
    .tab-bar-item cover-image {
      width: 44rpx;
      height: 44rpx;
    }
    
    .tab-bar-item cover-view {
      font-size: 10px;
    }
    
    custom-tab-bar/index.js 代码如下:
    //index.js
    Component({
      data: {
        selected: 0,
        custom: true,
        color: "#333",
        selectedColor: "#45A844",
        "list": [
          {
            "pagePath": "/pages/index/index",
            "iconPath": "/images/shouye_default.png",
            "selectedIconPath": "/images/shouye.png",
            "text": "首页"
          },
          {
            "pagePath": "/pages/order/order",
            "iconPath": "/images/dingdan.png",
            "selectedIconPath": "/images/dingdan_check.png",
            "text": "订单"
          },
          {
            "pagePath": "/pages/user/user",
            "iconPath": "/images/wode.png",
            "selectedIconPath": "/images/wode_check.png",
            "text": "我的"
          }
        ]
      },
      attached() {
      },
      methods: {
        switchTab(e) {
          const data = e.currentTarget.dataset
          const url = data.path
          wx.switchTab({ url })
          this.setData({
            selected: data.index
          })
        }
      }
    })
    
    注意:Path的路径前面要多加 "/"
    最后需要在tabBar对应的页面获取对应选中状态的值
    pages/index/index.js 首页 selected: 0 代码如下:
    //index.js
    Page({
      data: {
      
      },
      onLoad: function (options) {
        
      },
      onShow(){
        if (typeof this.getTabBar === 'function' &&
          this.getTabBar()) {
          this.getTabBar().setData({
            selected: 0
          })
        }
      }
    })
    
    pages/order/order.js 订单 selected: 1 代码如下:
    //order.js
    Page({
      data: {
      
      },
      onLoad: function (options) {
        
      },
      onShow(){
        if (typeof this.getTabBar === 'function' &&
          this.getTabBar()) {
          this.getTabBar().setData({
            selected: 1
          })
        }
      }
    })
    
    pages/user/user.js 订单 selected: 2 代码如下:
    //user.js
    Page({
      data: {
      
      },
      onLoad: function (options) {
        
      },
      onShow(){
        if (typeof this.getTabBar === 'function' &&
          this.getTabBar()) {
          this.getTabBar().setData({
            selected: 2
          })
        }
      }
    })
    
    编译结果如下:
    底部导航