原生小程序--引入字体图标和搭建tabbar

男娘i 2023-02-18 12:58 1阅读 0赞

### 引入字体图标 ###

1.  在项目根目录 / styles / iconfont.wxss

省略...

1.  在app.wxss中引入

@import "./styles/iconfont.wxss";

1.  在页面中使用

### 搭建tabbar结构 ###

> 在app.json文件中，与 window平级
> 
> 注意：tabbar里面的pagePath路径，必须首先存在于 pages里面才可以！！！

"pages": [
        "pages/index/index",
        "pages/demo/demo",
        "pages/search/search",
        "pages/category/category",
        "pages/goods_lsit/goods_lsit",
        "pages/goods_detail/goods_detail",
        "pages/cart/cart",
        "pages/collect/collect", 
        "pages/order/order",
        "pages/user/user",
        "pages/feedback/feedback",
        "pages/login/login",
        "pages/auth/auth",
        "pages/pay/pay"    
      ],
     "tabBar": {
        "color": "#666666",
        "selectedColor": "#d43c43",
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "/assets/icons/home.png",
            "selectedIconPath": "/assets/icons/home-active.png"
          },
          {
            "pagePath": "pages/category/category",
            "text": "分类",
            "iconPath": "/assets/icons/cates.png",
            "selectedIconPath": "/assets/icons/cates-active.png"
          },
          {
            "pagePath": "pages/cart/cart",
            "text": "购物车",
            "iconPath": "/assets/icons/cart.png",
            "selectedIconPath": "/assets/icons/cart-active.png"
          },
          {
            "pagePath": "pages/user/user",
            "text": "我的",
            "iconPath": "/assets/icons/my.png",
            "selectedIconPath": "/assets/icons/my-active.png"
          }
        ],
        "position": "bottom"
      }