每天学习一点点,成功增加一大步

微信小程序-底层工具栏

微信小程序 zhanghui 143℃

一边研究微信小程序,一边做记录,这篇记录的是底层工具栏是如何实现的。

效果图

在【pages】目录下面分别建立两个page,分别为【tabOfOne】和【tabOfTwo】

目录结构

app.json 的配置

检查【app.json】的【page】是否加上了

"pages/tabOfOne/tabOfOne",
    "pages/tabOfTwo/tabOfTwo"

在根节点上加入以下代码

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "pages/index/img/icon.png",
        "selectedIconPath": "pages/index/img/icon.hover.png"
      },
      {
        "pagePath": "pages/tabOfOne/tabOfOne",
        "text": "One",
        "iconPath": "pages/tabOfOne/img/icon.png",
        "selectedIconPath": "pages/tabOfOne/img/icon.hover.png"
      },
      {
        "pagePath": "pages/tabOfTwo/tabOfTwo",
        "text": "Two",
        "iconPath": "pages/tabOfTwo/img/icon.png",
        "selectedIconPath": "pages/tabOfTwo/img/icon.hover.png"
      }
    ]
  },

转载请注明:隨習筆記 » 微信小程序-底层工具栏

喜欢 (0)