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

引入字体图标

  1. 在项目根目录 / styles / iconfont.wxss
省略...
  1. 在app.wxss中引入
@import "./styles/iconfont.wxss";
  1. 在页面中使用
<view class="inonfont 字体图标名称"></view>

搭建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"
  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

落花流雨

你的鼓励将是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值