微信小程序-【仿咸鱼】的底部导航

最新推荐文章于 2025-02-09 19:53:44 发布

原创

最新推荐文章于 2025-02-09 19:53:44 发布 · 3.6k 阅读

25 ·

CC 4.0 BY-SA版权

效果：

说明：需要隐藏小程序自带的tabBar

下载地址：https://github.com/SuRuiGit/wxapp-customTabbar

使用步骤：

第一步：找到项目中的tabbarComponent目录，拷贝到你的工程中，然后将tabbarComponent->icon图标替换成你自己的tabbar图片，或者我们正常图片都是放在images目录下，这里我就是放在images下

第二步：到app.json中配置tabBar，只强调闲鱼的tabbar中间的按钮是跳到二级页面，所以不配置在tabBar的list中。如图所示，就是首页、名片、管理、我的配置在app.json中。

"tabBar": {
    "backgroundColor": "#ffffff",
    "color": "#979795",
    "selectedColor": "#1c1c1b",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/icon/home.png",
        "selectedIconPath": "images/icon/homeselect.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/menu/menu",
        "text": "名片",
        "iconP