前端微信小程序实战篇

最新推荐文章于 2024-07-24 16:30:30 发布

敲代码的猴

最新推荐文章于 2024-07-24 16:30:30 发布

阅读量5.9k

点赞数 3

分类专栏：前端文章标签：前端微信电商

本文链接：https://blog.csdn.net/python233/article/details/72972541

版权

本文介绍了微信小程序中电商应用的底部和顶部导航栏制作。讲解了如何配置app.json实现底部导航栏，包括tabBar的属性设置、图片路径及限制，并分享了顶部导航栏的创建方法，涉及wx:for、bindtap等关键知识点。

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

电商底部导航栏的制作

我想大家对电商一定不陌生，一般电商的底部导航栏有以下几个首页、分类、购物车、个人中心。

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":