微信小程序tabBar模板用法实例分析【附demo源码下载】

微信小程序tabBar模板用法实例分析

简介

本文将介绍微信小程序的tabBar模板用法，并提供一个demo供下载。

tabBar模板

tabBar模板可以让开发者更方便地实现小程序的底部导航栏功能。tabBar可以包含2-5个按钮，每个按钮对应一个不同的页面。当用户点击按钮时，小程序会自动跳转到相应的页面。

tabBar模板的常用属性有以下几个：

1. backgroundColor：tabBar的背景颜色。
2. color：tabBar未选中时的文字颜色。
3. selectedColor：tabBar被选中时的文字颜色。
4. list：tabBar包含的按钮列表，必须是一个数组，数组中每一个元素代表一个按钮，包含以下属性：
5. pagePath：表示点击这个按钮跳转到的页面路径。
6. iconPath：表示按钮未选中时的图标路径，大小建议为32*32。
7. selectedIconPath：表示按钮被选中时的图标路径，大小建议为32*32。
8. text：表示按钮的文本内容，长度建议不超过4个字符。

实例分析

下面通过两个示例，详细介绍tabBar模板的具体用法：

示例1

假设我们要制作一个包含“首页”、“发现”、“我的”三个页面的底部导航栏。我们可以在app.json中设置tabBar的属性，代码如下：

{
  "tabBar": {
    "backgroundColor": "#ffffff",
    "color": "#666666",
    "selectedColor": "#ff0000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/home.png",
        "selectedIconPath": "image/home-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/discovery/discovery",
        "iconPath": "image/discovery.png",
        "selectedIconPath": "image/discovery-active.png",
        "text": "发现"
      },
      {
        "pagePath": "pages/me/me",
        "iconPath": "image/me.png",
        "selectedIconPath": "image/me-active.png",
        "text": "我的"
      }
    ]
  }
}

以上代码中，我们定义了一个tabBar，其背景颜色为白色，未选中按钮文本颜色为灰色，被选中按钮文本颜色为红色。tabBar包含三个按钮，分别对应三个不同的页面。

接下来，我们需要在app.json中添加“pages”数组，定义这三个页面，代码如下：

{
  "pages": [
    "pages/index/index",
    "pages/discovery/discovery",
    "pages/me/me"
  ],
  "tabBar": {
    ...
  }
}

以上代码中，“pages”数组包含三个元素，分别代表三个页面的路径。注意，这三个页面必须分别对应上面tabBar中定义的三个按钮。

最后，我们需要在每个页面中添加一个tabBar组件，以实现底部导航栏的显示。我们可以在每个页面的wxml文件中添加以下代码：

<tabBar></tabBar>

以上代码中，我们使用了一个标签，用于显示底部导航栏。

示例2

接下来，我们介绍一种动态修改tabBar属性的方法。假设在我们的小程序中，用户可以切换不同的主题，不同的主题对应不同的tabBar样式。这时，我们需要在用户切换主题时，动态修改tabBar的属性。

在onLoad方法中，我们可以获取到当前页面的路由信息。我们可以根据这个信息，判断当前所在的页面，并根据当前的主题设置tabBar的属性。代码如下：

onLoad: function(options) {
  var route = getCurrentPages()[getCurrentPages().length - 1].__route__;
  if(route == "pages/index/index"){
    wx.setTabBarStyle({
      backgroundColor: "red",
      color: "white",
      selectedColor: "blue"
    });
  }else if(route == "pages/discovery/discovery"){
    wx.setTabBarStyle({
      backgroundColor: "blue",
      color: "white",
      selectedColor: "red"
    });
  }else if(route == "pages/me/me"){
    wx.setTabBarStyle({
      backgroundColor: "green",
      color: "white",
      selectedColor: "yellow"
    });
  }
}

以上代码中，我们首先获取了当前页面的路由信息。然后，根据当前的页面路由信息，判断需要设置什么样的tabBar属性。最后，调用wx.setTabBarStyle方法，动态修改tabBar的属性。

demo源码下载

完整的demo源码可以在以下链接中下载：

https://github.com/wenjusong/wxapp-tabbar-demo

结论

本文介绍了微信小程序tabBar模板的用法，并提供了两个示例说明，相信读者通过阅读本文已经能够掌握tabBar模板的基本用法，能够在实践中灵活运用。