Uniapp小程序开发-底部tabbar的开发思路

2026/9/19 15:41:14 拓冰建站浏览量

文章目录

前言
一、uniapp 实现 tabbar
二、图标使用网络图片
- 后端返回tabbar信息
- uniapp方式中的setTabBarItem
总结

前言

记录uniapp 开发小程序的底部tabbar ，这里讨论的不是自定义tabbar的情况。而是使用wx.setTabBarItem(Object object) 这个api的情况。关于custom 小程序底部tabbar的可以跳过。

一、uniapp 实现 tabbar

实现 tabbar 的简单步骤如下：

在 uniapp 项目的 pages.json 文件中，配置 tabBar 字段，来定义 tabbar 的样式和内容，例如：

{"tabBar": {"color": "#666","selectedColor": "#f00","backgroundColor": "#fff","borderStyle": "black","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "static/tabbar/home.png","selectedIconPath": "static/tabbar/home_active.png"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "static/tabbar/cart.png","selectedIconPath": "static/tabbar/cart_active.png"},{"pagePath": "pages/user/user","text": "个人中心","iconPath": "static/tabbar/user.png","selectedIconPath": "static/tabbar/user_active.png"}]}
}

在 pages 目录下创建对应的三个页面：index、cart 和 user。
在 pages/index 目录下创建 index.vue 文件，编写首页的内容。
在 pages/cart 目录下创建 cart.vue 文件，编写购物车页面的内容。
在 pages/user 目录下创建 user.vue 文件，编写个人中心页面的内容。
在 App.vue 文件中，将 tabbar 的内容放在 <tabbar> 标签内，例如：

<template><view><router-view></router-view><tabbar></tabbar></view>
</template>

在项目的根目录下，创建 components 文件夹，再在该文件夹下创建 tabbar.vue 文件，编写 tabbar 的样式和逻辑，例如：

<template><view class="tabbar"><view v-for="(item, index) in tabBar.list" :key="index" class="tabbar-item" @click="switchTab(index)"><image :src="item.selected ? item.selectedIconPath : item.iconPath" class="tabbar-icon"></image><view class="tabbar-text">{{ item.text }}</view></view></view>
</template><script>
export default {data() {return {tabBar: getApp().globalData.tabBar  // 从全局数据中获取 tabBar 的配置}},methods: {switchTab(index) {uni.switchTab({url: '/' + this.tabBar.list[index].pagePath})}}
}
</script><style scoped>
.tabbar {display: flex;justify-content: space-between;align-items: center;height: 50px;background-color: #fff;border-top: 1px solid #000;
}.tabbar-item {flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 12px;color: #666;
}.tabbar-icon {width: 24px;height: 24px;
}.tabbar-text {margin-top: 2px;
}
</style>

在 main.js 文件中全局配置 tabBar 的配置，例如：

App({globalData: {tabBar: require('./pages.json').tabBar}
})

这样，就完成了 tabbar 的简单实现过程。tabbar 的样式和逻辑可以根据项目的需求进行自定义修改，tabbar第一个path与pages的path 保持一致。也就是首页路径。

二、图标使用网络图片

那么如果是icon是后端返回网络图片，url的形式。

{"iconPath": "https://files/static/tabbar/home.png","selectedIconPath": "https://files/static/tabbar/home_active.png"
}

注意这个功能要小程序版本的基础库版本在 2.7.0以上。

在这里插入图片描述

后端返回tabbar信息

后端返回tabbar信息，已达到可以在后端管理tabbar的图标。即是iconPath，selectedIconPath 这些是支持重置。官方提供了这个apiwx.setTabBarItem(Object object)

在这里插入图片描述

uniapp方式中的setTabBarItem

如图在onLauch中加入相关逻辑。获取tabbar信息后，uni.setTabBarItem。
在这里插入图片描述

总结

今天的内容就在这里了，本文讨论如何使用uniapp实现基本tabbar功能，接着给出动态设置icon的思路。依赖的api是uni.setTabBarItem。

建站实战干货