微信小程序实战篇-电商（一）

最新推荐文章于 2024-08-19 09:11:52 发布

码农掘金

最新推荐文章于 2024-08-19 09:11:52 发布

阅读量2.5w

点赞数 33

分类专栏：微信小程序文章标签：电商导航微信小程序微信小程序开发

本文链接：https://blog.csdn.net/u012927188/article/details/72817261

版权

本文介绍了微信小程序中电商应用的底部导航栏和顶部导航栏的制作方法。通过修改app.json配置底部导航栏，包括颜色、图片等，并通过事件监听实现顶部导航栏的交互。同时，文中还探讨了导航栏的限制和自定义方法。

摘要由CSDN通过智能技术生成

哈喽，大家好，端午节过的怎么样啊，代码君可是没休息，专心的写电商文章哦，也是蛮拼的，如果对代码君认可的话，欢迎点赞转发，你们的点赞转发是对我最大的支持！好啦，言归正传，我们今天要讲解微信小程序的实战篇-电商，因为很多读者都反馈让我出一个关于电商的教程，所以我就打算利用空余时间写几篇关于电商小程序的教程，这个是第一篇，好，小明同学，现在要开始划重点啦，注意听哦~

电商底部导航栏的制作

我想大家对电商一定不陌生，一般电商的底部导航栏有以下几个首页、分类、购物车、个人中心。所以我们按照这个来做吧，说到底部导航，不知道你还记得在微信小程序入门篇（一）中app.json的作用，如果不记得，请翻看一下，app.json是用来配置page路径以及导航栏属性的，那我们要做首页、分类、购物车、个人中心界面就要在page也添加这几个界面，所以在app.json的page里添加如下代码，写入page路径，系统会自动帮你创建界面的

  "pages":[
    "pages/home/home",
    "pages/classify/classify",  
    "pages/cart/cart",
    "pages/mine/mine",
    "pages/index/index"
  ],

好，既然添加了四个界面，那我们要怎么做底部导航栏呐，今天给app.json再添加一个属性，就是可以在app.json里配置导航栏，将下面代码添加到app.json里面

 "tabBar": {
    "color": "#858585",
    "selectedColor": "#f0145a",
    "backgroundColor": "#ffffff",
    "borderStyle": "#000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "images/bottomNav/home.png",
        "selectedIconPath": "images/bottomNav/home_select.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/classify/classify",
        "iconPath": "images/bottomNav/classify.png",
        "selectedIconPath": "images/bottomNav/classify_select.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",