小程序搭建：购物平台03 tabbar结构（选择栏）

最新推荐文章于 2023-06-18 16:52:09 发布

Snailoffical

最新推荐文章于 2023-06-18 16:52:09 发布

阅读量175

点赞数

分类专栏：小程序购物平台

本文链接：https://blog.youkuaiyun.com/weixin_51646113/article/details/113861972

版权

小程序购物平台专栏收录该内容

5 篇文章

订阅专栏

效果
在这里插入图片描述

1.将所需的相关图片导入小程序中
在这里插入图片描述
2.在app.json建立相关tabbar代码
输入tabbar拓展即可

3.在list中设置多条语句块（对应四个图标）

4.改相关数值

"tabBar": {
    "color": "",//未被选中时的字体颜色
    "selectedColor": "",//被选中时的字体颜色
    "backgroundColor": "",//背景颜色
    "position": "bottom",//位置
    "borderStyle": "black",//边框样式
    "list": [
    {
      "pagePath": "pages/index/index",//点击时出现的页面地址
      "text": "首页",//名称
      "iconPath": "icons/home.png",//没被选中时出现的图片地址
      "selectedIconPath": "icons/home-o.png"//被选中是出现的图片地址
    },```
5.相关数值
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210219134059274.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTY0NjExMw==,size_16,color_FFFFFF,t_70)