微信小程序学习之底部导航栏

首先,我们在app.json中添加4个页面,

"pages": [
    "pages/index/index",
    "pages/category/category",
    "pages/cart/cart",
    "pages/user/user"
  ],

其次我们把8张图片放到imaes文件夹下,

图标可以去https://www.iconfont.cn/下载

然后添加tabBar项(已经加上注释):

"tabBar": {
    // 文字的颜色
    "color": "#666",
    // 选中项文字颜色
    "selectedColor": "#fa2c19",
    // 导航的栏目
    "list":[
      {
        // 导航页面的地址
        "pagePath": "pages/index/index",
        // 导航项的说明文字
        "text": "首页",
        // 导航项的默认图片
        "iconPath": "./images/shouye.png",
        // 导航项的选中图片
        "selectedIconPath": "./images/shouye_select.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "类别",
        "iconPath": "./images/leibie.png",
        "selectedIconPath": "./images/leibie_select.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "./images/gouwuche.png",
        "selectedIconPath": "./images/gouwuche_select.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "用户",
        "iconPath": "./images/yonghu.png",
        "selectedIconPath":"./images/yonghu_select.png"
      }
    ]
  }

保存。

效果图:

### 微信小程序底部导航栏开发教程 #### 1. 配置 `app.json` 中的 `tabBar` 要在微信小程序中实现底部导航栏,首先需要在项目的根目录下的 `app.json` 文件中配置 `tabBar` 属性。此属性用于定义底部导航栏的各项参数,包括图标路径、文字描述以及对应的页面路径。 ```json { "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/home.png", "selectedIconPath": "images/home-active.png" }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "images/log.png", "selectedIconPath": "images/log-active.png" }] } } ``` 上述代码展示了如何通过 JSON 对象来指定两个标签页及其对应的文字说明和图片资源文件位置[^1]。 #### 2. 使用 `globalData` 进行全局状态管理 对于一些复杂的应用程序来说,可能还需要处理更复杂的逻辑,比如动态更新某个特定项的状态或者计数器等。这时可以利用 `App()` 构造函数内的 `globalData` 字段来进行跨页面的数据共享与同步操作。当涉及到像消息通知这样的功能时,可以通过监听这些全局变量的变化并及时反映到 UI 上去[^4]。 #### 3. 自定义样式调整 如果默认提供的样式无法满足设计需求,则可以根据实际情况进一步定制化外观表现形式。例如更改激活状态下 Tab 的字体颜色或是添加额外的效果过渡动画等等。这通常涉及 CSS 或者 WXML 结构上的改动,并且需要注意保持良好的用户体验一致性[^2]。 #### 4. 添加角标提示 为了增强交互性和信息传达效率,在某些情况下我们还希望能够给定的 Tab 加上一个小红点或者是数字角标的提醒方式。这种特性同样可以在 `app.json` 内部完成设置,只需简单地向目标列表项增加 `"badge"` 键即可。 ```json "tabBar": { ... "list":[ {"badget":"9", ...}, {... ] ... } ``` 以上就是关于创建一个基本但完整的微信小程序底部导航栏所需的关键知识点介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值