小程序底部导航按钮实现

商城小程序需要四个底部导航按钮,遂记录一下实现过程

最终实现效果如下所示

新建一个小程序项目,我是创建了JS模板,项目创建完成后需要新建五个文件夹,其中四个(page子文件夹)用于存放pages文件,一个sources文件夹(与pages同级)用于存放资源文件,如图标文件

图标需要8个,因为选中的图标和未选中的图标需要进行区分

图标文件源于阿里巴巴矢量图库

需要在app.json中添加以下配置信息,其中tabBar是新增的,其余均为系统默认生成

复制代码
{
  "pages": [
    "pages/Homepage/Homepage",
    "pages/index/index",
    "pages/logs/logs",
    "pages/Mine/mine",
    "pages/Recommend/recommend",
    "pages/ShoppingCart/shoppingCart"
  ],
  "tabBar": {
    "color": "#A9A9A9",
    "selectedColor": "#000000",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "black",
    "position": "bottom",
    "custom": false,
    "list": [
      {
        "pagePath": "pages/Homepage/Homepage",
        "text": "首页",
        "iconPath": "source/img/main.png",
        "selectedIconPath": "source/img/main_selected.png"
      },
      {
        "pagePath": "pages/Recommend/recommend",
        "text": "推荐",
        "iconPath": "source/img/star.png",
        "selectedIconPath": "source/img/star_selected.png"
      },
      {
        "pagePath": "pages/ShoppingCart/shoppingCart",
        "text": "购物车",
        "iconPath": "source/img/shop.png",
        "selectedIconPath": "source/img/shop_selected.png"
      },
      {
        "pagePath": "pages/Mine/mine",
        "text": "个人中心",
        "iconPath": "source/img/my.png",
        "selectedIconPath": "source/img/my_selected.png"
      }
    ]
  },
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}
相关推荐
毕设源码-钟学长1 小时前
【开题答辩全过程】以 “旧书驿站”微信小程序的设计与开发为例,包含答辩的问题和答案
微信小程序·小程序
小白64021 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·css·html
蓝胖子的多啦A梦3 小时前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
面向星辰8 小时前
html各种常用标签
前端·javascript·html
nodcloud19 小时前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
李昊哲小课1 天前
HTML 完整教程与实践
前端·html
项目題供诗1 天前
微信小程序开发教程(八)
微信小程序·小程序
小*-^-*九2 天前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
拼图2092 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
hashiqimiya2 天前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html