小程序自定义tabbar—让你的小程序与众不同

前言

本篇文章将详细介绍微信小程序自定义tabbar的设置方法和注意事项，希望能够帮助广大开发者更好地开发和设计自己的微信小程序，实现更加个性化和独特的用户体验。

目录

前言

一、自定义tabbar设置的重要性

二、怎么设置自定义tabbar呢

第一步，配置信息

第二步，添加tabBar代码文件

第三步，编写tabBar代码

第四步，使用tabBar

三、注意事项

---

  发本文章由猿梦_小星原创

本文章主旨——讲解微信小程序自定义tabbar的设置方法和注意事项

希望这篇文章能够给您带来帮助，给小编 点赞+关注+收藏+评论

一、自定义tabbar设置的重要性

微信小程序是一种新型的应用程序，可以在微信内部直接运行，无需下载和安装，具有轻量、易开发、易传播等特点。作为一种新型的应用形态，微信小程序在近几年已经得到广泛应用和推广。然而，微信小程序的开发规范和限制也给开发者带来了很多挑战，其中之一就是原生tabbar的限制。

默认情况下，微信小程序的底部导航栏（也称tabbar）是固定的，开发者无法更改其样式和布局，也无法实现更加个性化和独特的设计。为了解决这个问题，开发者可以选择自定义tabbar，从而实现更加灵活和自由的设计。

总之呢，自定义tabbar是一种非常实用的功能，可以让微信小程序更加美观、灵活、个性化，提高用户体验和差异化竞争力。

 

二、怎么设置自定义tabbar呢

首先，我们来看以下官方给我们的文档：

自定义 tabBar | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html定眼一看，是不是一头雾水，接下来，跟随小编一起来进行保姆级操作吧！

第一步，配置信息

注：这一步的操作呢，是必须的，一呢，是需要指定以下custom 字段，二呢，是为了如果自定义tabbar没有显示，那么现在设置的将会被显示。

在app.json中编写代码，如下：

  "tabBar": {        "custom": true,        "color": "#a5b5b5",        "selectedColor": "#22cd5e",        "borderStyle": "black" ,        "list": [{          "selectedIconPath": "images/tabBar/icon_1.png",          "iconPath": "images/tabBar/icon_11.png",          "pagePath": "pages/index/index",          "text": "首页"        }, {          "selectedIconPath": "images/tabBar/icon_2.png",          "iconPath": "images/tabBar/icon_22.png",          "pagePath": "pages/messages/messages",          "text": "消息"        },{          "selectedIconPath": "images/tabBar/icon_3.png",          "iconPath": "images/tabBar/icon_33.png",          "pagePath": "pages/lianPage/lianPage",          "text": "我的"        }      ]    },

按照平时设置tabbar的设置即可，记得要添加"custom": true字段。

第二步，添加tabBar代码文件

注：第二步代码和第三步代码在官方文档中给出的实例代码中复制即可。

在代码根目录下添加入口文件:

    custom-tab-bar/index.jscustom-tab-bar/index.jsoncustom-tab-bar/index.wxmlcustom-tab-bar/index.wxss

第三步，编写tabBar代码

wxml代码：