微信小程序-页面跳转Tabbar

简介: 首先我们需要搭建一个 Tabbar,在搭建之前我们将需要跳转的页面创建一下待会需要使用到。

官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar


首先我们需要搭建一个 Tabbar,在搭建之前我们将需要跳转的页面创建一下待会需要使用到。


创建 me 我的页面,在 pages 当中鼠标右键新建页面即可,在新建一个 order 订单页面,更改 app.json 配置添加 tabBar 配置项:

{
  "tabBar": {
    "color": "#000000",
    "backgroundColor": "#000000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/assets/images/cart.png",
        "selectedIconPath": "/assets/images/cart-active.png"
      },
      {
      "pagePath": "pages/order/order",
      "text": "订单",
      "iconPath": "/assets/images/cart.png",
      "selectedIconPath": "/assets/images/cart-active.png"
      }, 
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "/assets/images/user.png",
        "selectedIconPath": "/assets/images/user-active.png"
      }
    ]
  }
}


图片,需要的私信我。

目录
相关文章
|
22天前
|
JSON 小程序 数据格式
微信小程序的tabbar怎么配置
微信小程序的tabbar怎么配置
36 2
|
1月前
|
小程序 IDE 搜索推荐
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
46 0
|
1月前
|
小程序 开发工具 git
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
|
22天前
|
缓存 小程序 API
微信小程序如何进行页面跳转
微信小程序如何进行页面跳转
54 3
|
22天前
|
JSON 小程序 搜索推荐
微信小程序如何自定义tabbar
微信小程序如何自定义tabbar
18 3
|
1月前
|
数据采集 小程序 数据挖掘
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
|
1月前
|
小程序
【微信小程序】-- 全局配置 -- tabBar(十七)
【微信小程序】-- 全局配置 -- tabBar(十七)
【微信小程序】-- 全局配置 -- tabBar(十七)
|
1月前
|
JSON 小程序 前端开发
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
|
1月前
|
缓存 小程序 IDE
【每周一个小技巧】支付宝小程序自定义tabbar效果
【每周一个小技巧】支付宝小程序自定义tabbar效果
77 0
|
1月前
|
小程序 API 数据安全/隐私保护
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。
51 5