微信小程序自定义 TabBar，我会了！

精神支祝

已于 2024-07-25 10:08:23 修改

阅读量5.4k

点赞数 51

分类专栏：前端文章标签：微信小程序小程序

于 2024-07-25 08:15:00 首次发布

本文链接：https://blog.csdn.net/weixin_44692308/article/details/140663793

版权

微信小程序自定义 TabBar 实现教程

在微信小程序开发中，TabBar 是用户体验的重要组成部分。默认的 TabBar 样式可能无法满足所有应用的需求，因此自定义 TabBar 成为了一种趋势。本篇文章将带你一步步实现自定义 TabBar，同时分享一些在开发过程中遇到的问题和解决方案。

文章目录

微信小程序自定义 TabBar 实现教程

1. 配置 app.json

首先，确保在 app.json 中配置 custom 属性，启用自定义 TabBar。

{
   
  "tabBar": {
   
    "custom": true
  }
}

2. 创建自定义 TabBar 组件

在项目根目录中，创建一个名为 custom-tab-bar 的组件。需要创建以下文件：

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

2.1 index.js

在 index.js 中，实现 TabBar 的逻辑：

// custom-tab-bar/index.js
Component({
   
  data: {
   
    rightId: wx.getStorageSync('rightId') || 0,
    list: [{
   
        "pagePath": "/pages/index/index",
        "iconPath": "../img/1.png",
        "selectedIconPath": "../img/1-1.png",
        "text": "Page1"
      },
      {
   
        "pagePath": "/pages/page2/index",
        "iconPath": "../img/2.png",
        "selectedIconPath": "../img/2-1.png",
        "text": "Page2"
      }],
  },
  methods: {
   
    switchTab(e) {
   
      const data = e.currentTarget.dataset;
      const url = data

最低0.47元/天解锁文章