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

原创

已于 2024-02-24 14:01:51 修改 · 2.6k 阅读

标签

#uni-app #前端 #javascript

收录于

于 2024-02-24 13:36:39 首次发布

本文详细介绍了如何在uniapp中配置和实现底部tabbar，包括静态图标和使用网络图片的情况，以及后端返回tabbar信息并通过wx.setTabBarItem动态更新图标。

文章目录

前言
一、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"