微信小程序自定义tabbar

最新推荐文章于 2025-06-02 09:54:28 发布

原创最新推荐文章于 2025-06-02 09:54:28 发布 · 433 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #json #java

这里是微信官方关于自定义tabbar的文档：自定义 tabBar | 微信开放文档

可以试一下里面的官方示例，在下方图片的这个红框的地方（需要登录微信开发工具）：

app.json配置用于去除系统自带的tabbar，将custom的值设置为true。

  "tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "index/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "组件"
      },
      {
        "pagePath": "index/index2",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "接口"
      }
    ]
  },

重要的一步：自定义tabbar的文件必须叫custom-tab-bar，只要把这个文件放在项目里面这个文件的内容就自动跑到页面的下面变成自定义tabbar，想要什么样式自己去调整就行了。

tabbar的html文件：

<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="tab-bar">
  <view class="tab-bar-border"></view>
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
    <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
  </view>
</view>

tabbar的js文件：

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [{
      pagePath: "/index/index",
      iconPath: "/image/icon_component.png",
      selectedIconPath: "/image/icon_component_HL.png",
      text: "组件"
    }, {
      pagePath: "/index/index2",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "接口"
    }]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
})

tabbar的json文件：

{
  "component": true
}

还有这个用来给tabbar设置高亮：

  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function') {
        this.getTabBar((tabBar) => {
          tabBar.setData({
            active: 0   //这个数据的键名就是你在自定义tabbar的js页面定义的下标
          })
        })
      }
    }
  }

引入tabbar的页面的js文件要这样配置：，不然不能获取this.getTabBar()。