文章阅读

沉浸阅读完整内容

写文章

微信小程序tabBar

正在统计阅读人数 正在统计字数
登录收藏0
字号 100%

实现微信小程序的导航跳转

1.在app.json中配置路由

  "pages": [
    "pages/index/index",
    "pages/coupon/coupon",
    "pages/shop/shop",
    "pages/mine/mine"
  ],
 "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/index.png",
        "selectedIconPath": "image/indexs.png"
      },
      {
        "pagePath": "pages/coupon/coupon",
        "text": "优惠券",
        "iconPath": "image/index.png",
        " ": "image/indexs.png"
      },
      {
        "pagePath": "pages/shop/shop",
        "text": "找好店",
        "iconPath": "image/index.png",
        "selectedIconPath": "image/indexs.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "image/index.png",
        "selectedIconPath": "image/indexs.png"
      }
    ]
  },

iconPath:是你的图标

selectedIconPath:是激活的图标

pagePath:路径

text:标题名字

如果需要使用全局配置还需要在当前的json文件页面引入app.json

  "usingComponents": {
    "./app.json": "../../app.json"
  }

效果图:

推荐阅读

4 篇精选
文章 / 76vue 图片资源引入 文章 / 75vue使用子组件 文章 / 73vuex 数据存储读取 文章 / 74vue-cli安装脚手架

发表评论

评论 0

还没有评论,欢迎留下第一条讨论。

分享精彩,传递价值

生成专属海报,分享你的文章,让更多人发现好内容

浏览器不支持 Canvas,无法生成海报。

每日签到

每天来这里,记录一点持续积累。

当前积分--积分
本月签到--
本月获得--积分
正在读取