微信小程序自定义凸起底部导航栏

最新推荐文章于 2025-11-19 12:09:00 发布

原创最新推荐文章于 2025-11-19 12:09:00 发布 · 819 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #notepad++ #小程序

小程序专栏收录该内容

53 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了如何在微信小程序中利用自定义组件创建一个中间凸起的底部导航栏。通过定义自定义组件，设置WXML、WXSS和JS文件，然后在页面JSON配置文件中引入并配置导航栏项，实现导航栏的中间凸起效果。读者可以依据此教程调整样式和功能以适应不同应用场景。

在微信小程序中，底部导航栏是一个常见的UI组件，它可以让用户方便地切换不同的页面。通常，底部导航栏是平坦的，但有时我们可能希望给它一些特殊的样式，比如让它在中间凸起。在本篇文章中，我将介绍如何使用微信小程序自定义组件来实现这样的中间凸起底部导航栏。

首先，我们需要创建一个自定义组件来表示中间凸起底部导航栏。在微信小程序中，自定义组件是一种可以重复使用的UI元素，它由WXML、WXSS和JS三个文件组成。下面是一个示例的自定义组件结构：

<!-- custom-tab-bar.wxml -->
<view class="tab-bar">

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

TiCrystal

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

🏆 前端领域优质创作者

07-30

8344

微信小程序，vue2，vue3，导航菜单，tabbar，自定义导航，图标闪烁，图标文字，图片，微信小程序自定tabbar有没有接近原生的体验，初次点击出现闪屏，在第一次切换还是会闪一下，页面切换存在闪动，自定义tabBar首次点击闪烁问题，跳转页面图标闪动问题，多次闪回问题，中间凸起，突出悬浮，小程序自定义tabBar底部导航栏，自定义样式，设置中间凸出，中间图标凸出效果，tabbar凸起的显示，最好用的组件插件，解决问题，闪屏，跳转加载不流畅，非常卡，点击闪一下，微信小程序tabbar闪烁，自己写不用原生

微信小程序 底部导航栏实现凸出内凹效果

hujie9371的博客

12-26

1333

但在【SkylineUI组件库】小程序中的底部导航栏，我则是直接使用canvas绘制，并且使用skyline渲染框架，不仅解决了以上问题，并且还实现较高的动画性能，下期，我会整理源码开放。在微信小程序开发中，开发者往往需要根据自定义的需求实现底部导航栏，而这种凸出与内凹的效果往往使人头疼。一般的解决方案是使用图片或者svg显示凹凸，或者利用css阴影效果遮挡切角。主要难点是背景色、圆切角的过渡、透明、阴影遮挡等问题。

1 条评论您还未登录，请先登录后发表或查看评论

微信小程序自定义导航栏完全攻略：告别适配困扰，打造完美导航体验

最新发布

gitblog_01064的博客

11-19

610

你是否曾经在小程序开发中遇到这样的困扰：导航栏在不同手机上显示效果不一致，内容上下不居中，甚至在某些机型上出现错位？这些问题不仅影响用户体验，更让开发者头疼不已。今天，我们将为你介绍一个能够彻底解决这些问题的终极方案——navigation-bar组件。 ## 为什么你需要自定义导航栏？ 微信小程序原生导航栏虽然简单易用，但在实际开发中却存在诸多限制： | 痛点 | 原生导航栏 | navi

小程序自定义底部圆形凸起导航栏

2301_80934911的博客

01-26

1212

需要在pages中开启自定义导航才能使用。凸起的圆形需要自己根据你的需求去修改。在需要使用的页面引用一下可以了。在min.js中注册使用。

微信小程序自定义 底部 tabbar （中间凸起）

一心只想敲好代码

06-29

3710

微信小程序自定义 底部 tabbar （中间凸起）

vue3 && uni-app 中小程序实现底部tabbar 中间凸起部分或者说自定义底部tabbar [保姆级别教程]

qq_52602294的博客

05-28

4215

vue3 uni-app小程序实现底部tabbar中间凸起的效果

微信小程序自定义底部导航栏

weixin_62980497的博客

05-31

520

可获取到底部导航栏高度，存在app全局变量中，其他页面有特殊需求需要动态计算页面高度时可能需要用到此属性。微信小程序自定义底部导航栏，原生实现，不包含其他任何第三方组件，比较干净，开箱即用。可自定义是否添加中间的大图标菜单，当然也可自定义大图标的默认与激活样式。解决点击导航菜单时，激活的菜单貌似并不同步的问题。可自定义每个菜单的默认、激活后的图标和文字样式。可自定义激活动画，默认这个心跳过渡动画。底部根据是否有安全距离自动调整。可自定义底部导航栏列表样式。不废话，直接贴上完整源码。

精选资源

微信小程序自定义tabBar,中间圆形凸起

05-31

综上所述，通过自定义`tabBar`组件，我们可以实现微信小程序中中间圆形凸起的效果，同时支持深色模式和iPhoneX系列底部横线的自适应。这不仅提升了用户体验，也为我们的小程序赋予了更多个性化的元素。

精选资源

uniapp 微信小程序tabbar凸起的显示

08-25

在开发微信小程序时，UI设计和用户体验是至关重要的部分，特别是在构建导航栏（tabbar）时。`uniapp`是一个跨平台的开发框架，它允许开发者使用一套代码库来构建多端应用，包括微信小程序。在`uniapp`中处理微信小...

微信小程序｜小程序自定义底部导航栏

热门推荐

商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml

09-30

1万+

小程序底部导航栏组件，实现多tabBar，自定义凸起

微信小程序自定义底部导航栏原生语法

08-10

微信小程序自定义底部导航栏（原生语法）

微信小程序自定义底部栏凸起效果+自定义扫码详细介绍

菜菜要努力吖

08-15

2727

微信小程序自定义tabBar,中间圆形凸起，自定义扫码

微信小程序自定义tabbar圆滑凸起效果

前端扛把子的博客

12-04

1481

次效果解决了切换tabbar闪烁的问题，并且能够实现通知圆点的效果。小程序自定义底部菜单，实现中间凸起圆滑效果。

uni-app 自定义底部凸起导航栏

m0_61073617的博客

02-17

1568

tabBar支持图片、iconfont图标展示。

微信小程序之（底部导航）

Lee的博客

05-28

2336

首先在app.json中添加以下代码"tabBar": { "color": "#cdcdcd",//为本未选中shihou的颜色 "selectedColor": "#ec6376",//为本选中时的颜色 "borderStyle": "#f3c4cb",//边框颜色 "list": [ {

uniapp开发小程序-实现底部tabbar中间凸起

weixin_70430674的博客

09-07

1343

【代码】uniapp开发小程序-实现底部tabbar中间凸起。

微信小程序自定义tabbar栏【中间突出样式】

山山而川~

01-11

9581

昨天主管突然给我说微信小程序默认的 `tabBar` 不美观，让我改成中间突出的那种样式。纵然我心里面有千般不情愿，但还是接下了这个任务。查了一下文档 [自定义 tabBar](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html) 发现有这个方法，有思路了就赶紧搞起来，以下是我的开发经验分享。

微信小程序设置底部导航栏

m0_60708088的博客

05-15

477

微信小程序设置底部导航栏_shykevin的博客-优快云博客