「已注销」 2023-03-01 09:43 采纳率: 77.8%
浏览 29
已结题

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

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

img

img

img

  • 写回答

2条回答 默认 最新

  • 程序yang 全栈领域优质创作者 2023-03-01 10:35
    关注

    给个例子你参考:
    假如我的导航有“消息”、“首页”和“我的”三个导航按钮
    要切换底部导航栏的图标和文字,可以通过以下步骤来实现:
    -在 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 数组一一对应,否则会导致底部导航栏显示异常。

    希望能帮助到你

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月9日
  • 已采纳回答 3月1日
  • 创建了问题 3月1日

悬赏问题

  • ¥15 ansys fluent计算闪退
  • ¥15 有关wireshark抓包的问题
  • ¥15 需要写计算过程,不要写代码,求解答,数据都在图上
  • ¥15 向数据表用newid方式插入GUID问题
  • ¥15 multisim电路设计
  • ¥20 用keil,写代码解决两个问题,用库函数
  • ¥50 ID中开关量采样信号通道、以及程序流程的设计
  • ¥15 U-Mamba/nnunetv2固定随机数种子
  • ¥15 vba使用jmail发送邮件正文里面怎么加图片
  • ¥15 vb6.0如何向数据库中添加自动生成的字段数据。