本文主要是介绍小程序自定义tabbr，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

这里写目录标题

• 自定义tabar说明
• 原生tabbar配置
• 自定义tabar

自定义tabar说明

比如我们想定义这样的tabbar原生就无法为我们满足，

原生tabbar配置

微信小程序有对应的tabbar定制只需要在app.json文件配置即可。

  "tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/user/user",
        "iconPath": "./assimg/hd.png",
        "selectedIconPath": "./assimg/hds.png",
        "text": "活动"
      },
      {
        "pagePath": "pages/index/index",
        "iconPath": "./assimg/dh.png",
        "selectedIconPath": "./assimg/hds.png",
        "text": "导航"
      },
      {
        "pagePath": "pages/navigator/navigator",
        "iconPath": "./assimg/md.png",
        "selectedIconPath": "./assimg/hds.png",
        "text": "我的"
      }
    ]
  },

自定义tabar

1.新建custom-tab-bar文件夹
*必须先在json设置"custom": true,才能自定义我们的tabbar

//我们编辑js代码
Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    "list": [{
        "pagePath": "/pages/index/index",
        "iconPath": "../assimg/hd.png",
        "selectedIconPath": "../assimg/hds.png",
        "text": "活动"
      },
      {
        "pagePath": "/pages/navigator/navigator",
        "iconPath": "../assimg/dh.png",
        "selectedIconPath": "../assimg/dhs.png",
        "text": "导航",
        "diyClass": "diy"
      },
      {
        "pagePath": "/pages/user/user",
        "iconPath": "../assimg/md.png",
        "selectedIconPath": "../assimg/mds.png",
        "text": "我的"
      }
    ]
  },
  attached() {},
  onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      this.setData({
        selected: data.index
      })
      wx.switchTab({
        url
      })
    }
  },

})

//wxhtml页面代码
<!--miniprogram/custom-tab-bar/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 {{item.diyClass}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" class="{{item.diyClass}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}" class="{{item.diyClass}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

由于自定义的tabbar效果很强但是也带来了很多问题比如切换空白等等，亲们在自定义的时候如果不是真的需求需要尽量使用原生定义的

这篇关于小程序自定义tabbr的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！