小程序中自定义tabbar组件

微信原生的tabbar太丑了，实际项目中要根据UI设计稿来开发。大致思路是：

在app.json中定义好tabbar中的页面路径
自己写一个tabbar的组件，就跟写页面一毛一样的
在要使用tabbar的页面中引入组件，并在app.js中隐藏原生的tabbar
话不多说，直接上代码。

app.json

 "tabBar": {
    "color": "transparent",
    "selectedColor": "#fff",
    "backgroundColor": "transparent",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/promotion/promotion",
        "text": "推广"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的"
      }
    ]
  },

tabbar组件
wxml部分：

<view class="footer-bar flex-between">
    <view class="each-nav {{pageName == 'index' ? 'active' : ''}}" bindtap="handleHomeNav">
        <icon class="iconfont {{pageName == 'index' ? 'icon-tabindex' : 'icon-tabindex1'}}"></icon>
        <view class="bar-name">首页</view>
    </view>
    <view class="each-nav {{pageName == 'promotion' ? 'active' : ''}}" bindtap="handlePromotionNav">
        <icon class="iconfont {{pageName == 'promotion' ? 'icon-tabpro' : 'tabpro1'}}"></icon>
        <view class="bar-name">首页</view>
    </view>
    <view class="each-nav {{pageName == 'me' ? 'active' : ''}}" bindtap="handleMeNav">
        <icon class="iconfont {{pageName == 'me' ? 'icon-tabme' : 'icon-tabme1'}}"></icon>
        <view class="bar-name">我的</view>
    </view>  
</view>

JS部分：

properties: {
    pageName: {
        type: 'String'
    },
},
methods: {
    handleHomeNav: function() {
        const url = '/pages/index/index'
        wx.switchTab({
            url,
        });
    },
    handlePromotionNav: function() {
        const url = '/pages/promotion/promotion'
        wx.switchTab({
            url,
        });
    },
    handleMeNav: function() {
        const url = '/pages/me/me'
        wx.switchTab({
            url,
        });
    },
}

样式我就不贴了。组件里面我写的很简单，只定义了一个属性，没有绑定事件，大家在实际项目中可以自己添加。

在index页面中引用（这个组件可以在任何页面中引用的，不仅仅是TabBar中指定的页面，只不过跳转方式不同而已）

<tabBar pageName="{{'index'}}" ></tabBar>

最后，在app.js中隐藏原生tabbar

wx.hideTabBar();

小程序中自定义tabbar组件

推荐阅读更多精彩内容