上一节:
下一节:

  小程序 自定义导航

  • 自定义顶部导航

    上一章节我们使用 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
      })
    }
  }
})
    编译结果如下：
    底部导航
上一节:
下一节: