uni-app底部导航栏切换图标,点击首页,怎么样把图标切换了然后向上移?
2条回答 默认 最新
关注 给个例子你参考:
假如我的导航有“消息”、“首页”和“我的”三个导航按钮
要切换底部导航栏的图标和文字,可以通过以下步骤来实现:
-在 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无用
悬赏问题
- ¥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如何向数据库中添加自动生成的字段数据。