小程序自定义导航

由于公司需求，每每总是设计出个性化的内容，设计为凸显美观，但作为开发，就要考虑性能。

今天要记录一款小程序自定义导航，由于官方原本的导航直接在app.json里配置就可以了，如果自己写，总是会有那么一点不完美。

经过多方查阅资料，终于搞定了一款还算完美的自定义导航。

在此，记下，同时也分享给有需要的小程序猿们。

主要文件的目录结构如下：

├── components
│   └── custom-tabbar
│       ├── custom-tabbar.js
│       ├── custom-tabbar.json
│       ├── custom-tabbar.wxml
│       ├── custom-tabbar.wxss
│       └── tabbar-config.js
├── images
├── pages
│   ├── add
│   │   ├── add.js
│   │   ├── add.json
│   │   ├── add.wxml
│   │   └── add.wxss
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── news
│   │   ├── news.js
│   │   ├── news.json
│   │   ├── news.wxml
│   │   └── news.wxss
│   ├── shop
│   │   ├── shop.js
│   │   ├── shop.json
│   │   ├── shop.wxml
│   │   └── shop.wxss
│   └── user
│       ├── user.js
│       ├── user.json
│       ├── user.wxml
│       └── user.wxss
├── app.js
├── app.json
├── app.wxss

app.json

首先在app.json设置好固定底部导航的路径
tab的背景色和border均设置为白色，避免打开小程序闪出来的官方tab

自定义组建里有两个js文件 配置好需求路径及icon图和显示文字
tabbar-config.js

module.exports={
   tabStyle:{
      activeColor:'#FE494C',//触发时文字颜色
      inactiveColor:'#353535',//未触发时文字的颜色
   },
   tabs:[
      {
         "content":"首页",//显示的文字
         "activeImg":"/images/index-s.png",//触发时的图片
         "inactiveImg":"/images/index.png",//未触发的图片
         "path":"/pages/index/index"//按钮对应的路径
      },
      {
         "content": "消息",
         "activeImg": "/images/news-s.png",
         "inactiveImg": "/images/news.png",
         "path": "/pages/news/news"
      },
      {
         "content": "",
         "activeImg": "",
         "inactiveImg": "",
         "path": "/pages/add/add"
      },
      {
         "content": "购物车",
         "activeImg": "/images/car-s.png",
         "inactiveImg": "/images/car.png",
         "path": "/pages/shop/shop"
      },
      {
         "content": "我的",
         "activeImg": "/images/user-s.png",
         "inactiveImg": "/images/user.png",
         "path": "/pages/user/user"
      }
   ]
}

custom-tabbar.js组建js文件

const config = require('./tabbar-config.js')
Component({
   properties:{
      activeIndex:{
         type:Number,
         value:0
      }
   },
   data:{
      data:config
   },
   created() {
      //进入页面时需要隐藏掉原有的tabbar
      wx.hideTabBar({ aniamtion: false })
   },
   methods:{
      //点击tag
      clickTag(e){
         let index = e.currentTarget.dataset.index;
         this.changeTag(index)
         
      },
      bindMiddleTab:function(){
         this.changeTag(2)
      },
      //tag方法
      changeTag(index){
         //如果点击当前所在的项，不会跳转
         if(index == this.data.activeIndex){
            return false;
         }
         let pagePath = this.data.data.tabs[index].path;         
         // 如果点击的为中间按钮则使用navigator方式跳转 其他页面使用switch
         if(index == 2){
            wx.navigateTo({
               url: pagePath,
            })
         }else{
            wx.switchTab({
               url: pagePath
            })
         }
      }
   }
})

custom-tabbar.wxml

  <view class="tabbar-wrap">
   <view class='tabbar-item' wx:for='{{data.tabs}}' wx:key='' bindtap='clickTag' data-index='{{index}}'>
      <image src="{{index == activeIndex?item.activeImg:item.inactiveImg}}" wx:if='{{item.activeImg}}' ></image>
      <view wx:if="{{item.content}}" style='color:{{index == activeIndex?data.tabStyle.activeColor:data.tabStyle.inactiveColor}}'>{{item.content}}</view>
   </view>
   <view class='tabbar-middle' bindtap='bindMiddleTab'>
      <image src='../../images/add.png' class='middle-img tab-animated'></image>
   </view>
</view>

custom-tabbar.wxss

.tabbar-wrap{height:98rpx;background:#fff;width:100%;display:flex;position:fixed;bottom:0;box-shadow:0 -1rpx 10rpx rgba(0,0,0,.1)}
.tabbar-item{flex:1;height:96rpx;position:relative;font-size:18rpx;font-family:PingFangSC-Medium;display:flex;flex-direction: column;align-items: center;}
/* tabbar-image */
.tabbar-item image{width:54rpx;height:54rpx;display:block;margin-top:12rpx;}
.tabbar-middle{position:absolute;left:320rpx;width:110rpx;height:110rpx;top:-40%;background:#fff;border-radius:50%;box-shadow:0 2rpx 10rpx rgba(0,0,0,.2)}
.middle-img{width:102rpx;height:102rpx;display:block;margin:6rpx auto 0 auto;}

分别在对应路径的写入引入 改组建并且传入对应的activeIndex就可以啦
如果中间按钮不需要再显示底部按钮，且为navigator的跳转方式，则不需要写入，按需调整

<custom-tabbar activeIndex='0'></custom-tabbar>

虽然实现方法，已经OK，但还是有一个缺点，第一次进来点击tab的时候 会发生闪烁。不过已经近乎完美了。文末附上代码，有需要的可以自行下载。

小程序自定义导航完整代码下载