小程序 自定义导航

• 

  自定义顶部导航

  上一章节我们使用 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
        })
      }
    }
  })