uni-app底部导航栏切换图标

Question

uni-app底部导航栏切换图标，点击首页，怎么样把图标切换了然后向上移？

Answer 1

给个例子你参考：
假如我的导航有“消息”、“首页”和“我的”三个导航按钮
要切换底部导航栏的图标和文字，可以通过以下步骤来实现：
-在 pages.json 中设置 tabBar 配置项，包括 tab 样式、页面路径、默认选中的 tab 等。

{
  "tabBar": {
    "color": "#666",
    "selectedColor": "#007aff",
    "backgroundColor": "#f8f8f8",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tab-bar/home.png",
        "selectedIconPath": "static/tab-bar/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "static/tab-bar/message.png",
        "selectedIconPath": "static/tab-bar/message-active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/tab-bar/mine.png",
        "selectedIconPath": "static/tab-bar/mine-active.png"
      }
    ]
  }
}

• 在底部导航栏页面的 .vue 文件中，通过修改 data 中的 tabList 数组的元素，来改变对应 tab 的图标和文字。

<template>
  <view>
    <text>这是首页</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        {
          pagePath: "/pages/index/index",
          text: "首页",
          iconPath: "/static/tab-bar/home.png",
          selectedIconPath: "/static/tab-bar/home-active.png"
        },
        {
          pagePath: "/pages/message/message",
          text: "消息",
          iconPath: "/static/tab-bar/message.png",
          selectedIconPath: "/static/tab-bar/message-active.png"
        },
        {
          pagePath: "/pages/mine/mine",
          text: "我的",
          iconPath: "/static/tab-bar/mine.png",
          selectedIconPath: "/static/tab-bar/mine-active.png"
        }
      ]
    };
  },
  onShow() {
    // 修改 tabList 数组的第一个元素
    this.tabList[0] = {
      pagePath: "/pages/index/index",
      text: "其他",
      iconPath: "/static/tab-bar/other.png",
      selectedIconPath: "/static/tab-bar/other-active.png"
    };
  }
};
</script>

上面的代码中，我在 onShow 生命周期中修改了 tabList 数组的第一个元素，将“首页”改为“其他”，并替换了对应的图标。

你在修改 tabList 数组时，要保证其与 pages.json 中的 tabBar.list 数组一一对应，否则会导致底部导航栏显示异常。

希望能帮助到你