微信小程序,商城底部工具栏的实现

效果演示:

前提条件:

去阿里云矢量图标,下载8个图标,四个黑,四个红,如图:

新建文件夹icons,把图标放到该文件夹,然后把该文件夹移动到该项目的文件夹里面。如图所示

app.json

{
"pages": [
    "pages/home/home",
    "pages/category/category",
    "pages/cart/cart",
    "pages/my/my"
  ],

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#09bb07",
    "navigationBarTitleText": "我的商场",
    "navigationBarTextStyle": "white"
  },
"tabBar": {
    "color": "#999",
    "selectedColor": "##09bb07",
    "backgroundColor": "#fafafa",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "icons/_home.png",
        "selectedIconPath": "icons/home.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "icons/_category.png",
        "selectedIconPath": "icons/category.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "icons/_cart.png",
        "selectedIconPath": "icons/cart.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "icons/_my.png",
        "selectedIconPath": "icons/my.png"
      }
    ]
  },
  "lazyCodeLoading": "requiredComponents",
  "sitemapLocation": "sitemap.json"
}
相关推荐
大三觉醒push亡羊补牢女娲补天版1 小时前
微信小程序常见问题
微信小程序·小程序
漏刻有时2 小时前
微信小程序学习实录9:掌握wx.chooseMedia实现多图片文件上传功能(选择图片、预览图片、上传图片)
学习·微信小程序·notepad++
hmz8562 小时前
最新网课搜题答案查询小程序源码/题库多接口微信小程序源码+自带流量主
前端·微信小程序·小程序
小雨cc5566ru5 小时前
uniapp+Android智慧居家养老服务平台 0fjae微信小程序
android·微信小程序·uni-app
计算机学姐6 小时前
基于微信小程序的调查问卷管理系统
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
正小安13 小时前
如何在微信小程序中实现分包加载和预下载
前端·微信小程序·小程序
说私域13 小时前
基于定制开发与2+1链动模式的商城小程序搭建策略
大数据·小程序
丁总学Java19 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
工业互联网专业21 小时前
毕业设计选题:基于ssm+vue+uniapp的校园水电费管理小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
说私域1 天前
社群团购中的用户黏性价值:以开源小程序多商户AI智能名片商城源码为例
人工智能·小程序