阅读 497
🍁商城类小程序实战(二):底部导航栏的制作

🍁商城类小程序实战(二):底部导航栏的制作

这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战

底部导航栏的制作

一、素材准备

由于底部导航栏有图片,故我们需要找素材,我们在阿里巴巴图标库中,找了4个图标对应首页,分类,购物车和个人模块。

image.png 每个图标有两份,不同颜色,对应选中状态和未选中状态,将其放入我们的images目录下的tabbar文件夹里:

image.png

二、注册页面

首先,我们需要在小程序中建立好导航对应的页面,在app.json中的pages节点添加上页面地址,这样就完成了对4个页面的注册。

{
  "pages":[
    "pages/index/index",
    "pages/class/class",
    "pages/cart/cart",
    "pages/center/center"
  ]
}
复制代码

三、底部导航栏的实现

这个底部导航栏的实现,在小程序里中其实很简单,只需要在app.json中添加tabbar节点即可。

  "tabBar": {
    "color": "#7c7c7c",
    "selectedColor": "#f7545f",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/curhome.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/class/class",
        "iconPath": "images/tabbar/class.png",
        "selectedIconPath": "images/tabbar/curclass.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "images/tabbar/cart.png",
        "selectedIconPath": "images/tabbar/curcart.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/center/center",
        "iconPath": "images/tabbar/person.png",
        "selectedIconPath": "images/tabbar/curperson.png",
        "text": "个人"
      }
    ]
  }
复制代码

通过简单的配置,我们就完成了一个底部导航栏的开发,一起来看看效果吧~

20210807_131403.gif

tabBar是小程序的一个重要功能,我们需要熟悉其配置项:

属性必填默认值描述
colortab上的文字颜色,仅支持十六进制颜色
selectedColortab上的文字选中时的颜色,仅支持十六进制颜色
backgroundColortab的背景色,仅支持十六进制颜色
borderStyleblacktab上边框到的颜色,仅支持black和white
listtab的列表,最少2个,最多5个tab
positionbottom仅支持bottom和top
cuntomfalse自定义tabBar

tab的配置项:

属性必填默认值描述
pagePath页面路径,必须在pages中先定义
texttab上按钮文字
iconPath图片路径,大小限制为40KB,不支持网络图片,positon为top时不显示
selectedIconPath选中时的图片路径,大小限制为40KB,不支持网络图片,positon为top时不显示

最后

参考资料:小程序开发原理与实战
⚽本文介绍了开发商城类小程序的底部导航栏的实现过程,以及tabBar的使用~
⚾如果这篇文章对你有帮助的话,麻烦点赞收藏哟~
🏀GitHub 博客地址: github.com/Awu1227
🏉笔者还有其他专栏,欢迎阅读~
🏐玩转CSS之美
🎱Vue从放弃到入门
🎳深入浅出JavaScript