微信小程序怎么实现自定义菜单切换栏tabbar组

发布时间：2023-05-14 22:39:37

微信小程序在设计上注重用户交互体验，因此在一些复杂应用中往往要设计多个页面，为了更好的组织和呈现这些页面，通常会使用自定义菜单切换栏或tabbar组件。

一、自定义菜单切换栏

自定义菜单切换栏是指可以通过菜单项切换不同页面的导航栏。一般情况下，自定义菜单切换栏由两部分组成：菜单按钮和页面区域。

1. 菜单按钮

菜单按钮一般位于页面的顶部或底部，可以使用微信提供的组件或自定义样式来实现。具体实现如下：

（1）使用微信提供的组件

微信提供了两种组件可以实现菜单按钮：导航栏组件和选项卡组件。

? 导航栏组件

导航栏组件是由标题、返回按钮、背景色等组成的一种工具条，可以在文件目录中右键新建页面，选择导航栏页面来创建。

示例代码如下：

<!--在 app.json 中配置 pages（导航栏对应的页面）-->
{
  "pages": [
    {
      "path": "pages/tabbar/index",
      "style": {
        "navigationBarTitleText": "导航栏标题"
      }
    }
  ]
}

<!--在页面对应的 json 文件中，使用 navigationBar 配置-->
{
  "navigationBarTitleText": "导航栏标题",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black"
}

? 选项卡组件

选项卡组件是由选项卡和内容区域组成的导航条，可以通过点击选项卡来切换不同的内容区域。

示例代码如下：

<!--在 app.json 中配置 pages（选项卡对应的页面）-->
{
  "pages": [
    {
      "path": "pages/tabbar/index",
      "style": {
        "navigationBarTitleText": "选项卡标题"
      }
    }
  ]
}

<!--在页面对应的 json 文件中，使用 tabBar 配置-->
{
  "tabBar": {
    "color": "#707070",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/tabbar/index",
        "text": "选项卡一",
        "iconPath": "resources/img/tabbar/tab1.png",
        "selectedIconPath": "resources/img/tabbar/tab1_hover.png"
      },
      {
        "pagePath": "pages/tabbar/index2",
        "text": "选项卡二",
        "iconPath": "resources/img/tabbar/tab2.png",
        "selectedIconPath": "resources/img/tabbar/tab2_hover.png"
      }
    ]
  }
}

（2）自定义样式

自定义菜单切换栏也可以使用自定义样式来实现。使用自定义样式时，需要注意样式文件的路径和引用方式。

示例代码如下：

<!--在 app.wxss 文件中定义菜单样式-->
.menu-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50rpx;
  background-color: #fff;
  color: #666;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 2rpx rgba(0, 0, 0, 0.1);
}

.menu-bar-item {
  font-size: 26rpx;
  text-align: center;
  height: 50rpx;
  line-height: 50rpx;
}

.menu-bar-item.active {
  color: #09f;
}

<!--在页面中引用样式文件-->
<view class="menu-bar">
  <view class="menu-bar-item {{activeIndex==0?'active':''}}" bindtap="switchTab" data-index="0">菜单项一</view>
  <view class="menu-bar-item {{activeIndex==1?'active':''}}" bindtap="switchTab" data-index="1">菜单项二</view>
  <view class="menu-bar-item {{activeIndex==2?'active':''}}" bindtap="switchTab" data-index="2">菜单项三</view>
</view>

<!--在页面的 js 文件中定义 switchTab 方法-->
switchTab(e) {
  let index = e.currentTarget.dataset.index
  this.setData({ activeIndex: index })
}

2. 页面区域

页面区域一般指切换后显示的内容区域，可以根据业务需要自定义布局和样式。

二、Tabbar组件

Tabbar组件是指可以在页面底部固定显示的导航栏，可以方便用户在不同页面之间切换。Tabbar组件由多个Tab按钮和对应的页面组成，一般用于较为复杂的应用中。

Tabbar组件的基本实现思路如下：

1. 在app.json文件中对Tabbar进行配置。

"tabBar": {
  "position": "bottom",
  "backgroundColor": "#ffffff",
  "color": "#333333",
  "selectedColor": "#3cc51f",
  "borderStyle": "white",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/index.png",
      "selectedIconPath": "images/index_active.png"
    },
    {
      "pagePath": "pages/category/index",
      "text": "分类",
      "iconPath": "images/category.png",
      "selectedIconPath": "images/category_active.png"
    },
    {
      "pagePath": "pages/cart/index",
      "text": "购物车",
      "iconPath": "images/cart.png",
      "selectedIconPath": "images/cart_active.png"
    },
    {
      "pagePath": "pages/user/index",
      "text": "我的",
      "iconPath": "images/user.png",
      "selectedIconPath": "images/user_active.png"
    }
  ]
}

2. 在每个页面对应的json文件中可以单独对Tabbar进行配置。

{
  "navigationBarTitleText": "首页",
  "enablePullDownRefresh": true,
  "usingComponents": {
    "search-bar": "../components/search-bar"
  },
  "tabBar": {
    "selectedColor": "#3cc51f",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/index.png",
        "selectedIconPath": "/images/index_active.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "/images/category.png",
        "selectedIconPath": "/images/category_active.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "/images/cart.png",
        "selectedIconPath": "/images/cart_active.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "/images/user.png",
        "selectedIconPath": "/images/user_active.png"
      }
    ]
  }
}

3. 在每个页面对应的wxml文件中会使用wx:if等方式来实现显示Tabbar。

</view>

</navigator>

<text class="nav_text" style="{{activeIndex==1?'color: