欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

小程序 底部tab

程序员文章站 2024-03-21 11:31:10
...

效果如图

小程序 底部tab

代码如下:

配置在app.json中:(图标新建一个文件夹,在下变放入需要的图标)

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "优秀娇的萌宠乐园",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#108ee994",
    "selectedColor": "orange",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "店铺",
       "iconPath": "./css/img/aaa@qq.com",
      "selectedIconPath": "./css/img/aaa@qq.com"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "分类",
       "iconPath": "./css/img/aaa@qq.com",
       "selectedIconPath": "./css/img/aaa@qq.com"
      },
      {
        "pagePath": "pages/index/index",
        "text": "购物车",
          "iconPath": "./css/img/aaa@qq.com",
          "selectedIconPath": "./css/img/aaa@qq.com"
      },
      {
        "pagePath": "pages/index/index",
        "text": "我的订单",
         "iconPath": "./css/img/aaa@qq.com",
        "selectedIconPath": "./css/img/aaa@qq.com"
      }
    ]
  }
}