微信小程序怎么完成tabber界面

 时间:2026-02-15 10:55:11

1、我们第一步需要新建一个文件夹photo,将已经准悦伐备好了的图标放在文件夹内。

微信小程序怎么完成tabber界面

2、打开app.json,新建tabber项。代码如下:

 "pagePath": "攀信宙此处填页面的根目录",

 "text": "此处填文本,如“首页",

 "iconPath": "此处填的是图标路径",

 "selectedIconPath": "此处填的是被选中时的图标路径"。

微信小程序怎么完成tabber界面

3、完成一个tabber界面至少需要两个页面,两个图标。

如果需要四个,代码示例如下:

  "tabBar": {

    "selectedColor": "#C00000",

    "list": [

      {

        "pagePath": "pages/home/home",

        "text": "首页",

        "iconPath": "/static/static/tab_icons/home.png",

        "selectedIconPath": "/static/static/tab_icons/home-active.png"

      },

      {

        "pagePath": "pages/cate/cate",

        "text": "分类",

        "iconPath": "/static/static/tab_icons/cate.png",

        "selectedIconPath": "/static/static/tab_icons/cate-active.png"

      },

      {

        "pagePath": "pages/cart/cart",

        "text": "购物车",

        "iconPath": "/static/static/tab_icons/cart.png",

 鉴近       "selectedIconPath": "/static/static/tab_icons/cart-active.png"

      },

      {

        "pagePath": "pages/my/my",

        "text": "我的",

        "iconPath": "/static/static/tab_icons/my.png",

        "selectedIconPath": "/static/static/tab_icons/my-active.png"

      }

    ]

  • PS自由变换工具的运用介绍
  • PS将照片覆盖在纸盒上面的方法
  • 如何创建Vray太阳
  • 怎么用Photoshop自动合并到HDR Pro
  • 3DMAX晶格命令的运用~~~
  • 热门搜索
    微信企业号怎么注销 怎么去鱼尾纹 什么牌子的路由器好 赛欧怎么样 如何恢复微信聊天记录 如何设置打印机共享 黑豆怎么吃最有营养 如何学游泳 2016年奥运会在哪里举行 煮栗子怎么好剥皮