微信小程序--自定义底部菜单栏（tab-bar）

最新推荐文章于 2025-03-12 16:15:28 发布
最新推荐文章于 2025-03-12 16:15:28 发布
阅读量2.6k 收藏 14
点赞数 6
分类专栏： 微信小程序 文章标签： 微信小程序 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57423368/article/details/141789885
版权

效果展示

步骤：

步骤一：创建小程序项目（此处省略a little 文字~）

步骤二：在项目文件根目录下新建目录【custom-tab-bar】(切记-此处目录名称一定要是这个，不能随意命名，具体可见微信小程序官方文档【基础能力 / 自定义 tabBar (qq.com)】)，然后在【custom-tab-bar】文件夹里新建如下四个文件（其实质就是一个页面或者是一个组件内的基本文件/结构）

其中这四个文件中的内容，就是按照组件文件的结构和内容去编写即可；

步骤三：初始化index.js中的数据，如下图所示

最低0.47元/天 解锁文章
微信小程序｜小程序自定义底部导航栏
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
09-30 1万+
小程序底部导航栏组件，实现多tabBar，自定义凸起
微信小程序 - 自定义底部菜单栏
觉醒法师的专栏
08-07 7378
微信小程序底部菜单栏是可以通过自定义来实现的。主要涉及：新建组件、编写组件代码、设置样式、配置导航栏、在页面中引用。自定义底部导航栏可以创建出符合项目设计需求效果，实现个性化的页面切换功能。
微信小程序 - - - - - custom-tab-bar使用自定义tabbar
Dark_programmer的博客
05-14 1518
微信小程序 - - - - - custom-tab-bar使用自定义tabbar
从零到一揭秘微信小程序标签切换：tab-item、data-tab 和 bindtap 的奇妙冒险
最新发布
小丁的博客
03-12 834
tab-item：视觉的艺术家 🎨，用样式勾勒标签的轮廓。data-tab：逻辑的信使 📬，传递标签的身份信息。bindtap：交互的指挥家 🎵，协调用户操作与程序响应。这三者如同舞台上的三位主角，在微信小程序的剧场中上演了一出精彩的切换大戏。没有复杂的框架，没有冗余的代码，只需简单的配置，就能实现流畅的标签切换体验。这正是小程序开发的魅力所在！💡。
【微信小程序】自定义 tabBar
weixin_40874076的博客
09-02 9092
首先来看一下页面演示效果，页面中有下方标签栏是自定义 tabBar。自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。自定义组件Vant 组件库MobX 数据共享组件样式隔离组件数据监听器组件的 behaviorsVant 样式覆盖。
微信小程序 自定义tabbar
weixin_66029924的博客
09-05 968
微信小程序自定义tabbar 实现不同的tabbar样式和功能
微信小程序开发---自定义底部tabBar
weixin_73318685的博客
06-22 4165
实现步骤：1.在app.json中的tabBar项指定custom字段值为 true，同时其余tabBar相关配置也补充完整。 2.在代码根目录下添加入口文件添加 tabBar 代码文件，文件名必须为 custom-tab-bar，必须在根目录处添加（与page文件同级）。3.编写tabBar代码。4. 实现tabBar选中态
自定义微信小程序TabBar
HTML_Z的博客
05-07 745
自定义封装微信小程序TabBar。
uni-app-小程序自定义底部菜单样式示例
08-12
【uni-app小程序自定义底部菜单样式示例】 在uni-app框架中，开发微信小程序、支付宝小程序、H5等多端应用时，我们经常会遇到需要自定义底部导航菜单的需求，以实现更加个性化和一致性的用户体验。本示例将详细介绍...
微信小程序自定义底部导航栏原生语法
08-10
以上就是关于微信小程序自定义底部导航栏原生语法的主要内容。通过这种方式，开发者可以实现高度定制化的导航栏，提升应用的视觉效果和交互体验。在实际开发过程中，还需要结合具体需求进行调整和优化，确保导航栏...
自定义微信底部导航栏，示例代码
07-27
在微信小程序开发中，自定义底部导航栏是提升用户体验和个性化设计的重要环节。本文将深入讲解如何实现这一功能，提供示例代码，并介绍相关知识点。 首先，了解微信小程序的底部导航栏（tabBar）默认样式和配置。...
微信小程序自定义tabbar
07-24
微信小程序自定义tabbar【内有点击和滑动两种方式】 {{itemName}} {{itemName}} <!--可滑动切换tanbar--> {{itemName}} {{itemName}}
【微信小程序】自定义tabbar
韩旭不会敲代码吧的博客
03-17 2119
自定义tabbar
微信小程序 自定义 tabBar
Embrace924的博客
05-31 963
微信小程序 自定义 tabBar
微信小程序自定义底部导航栏
夏夜追凉丶的博客
06-19 3934
微信小程序自定义底部导航栏，原生干净，不含第三方库和组件，自定义自由度高
微信小程序---自定义tabbar
小琳爱分享的博客
01-03 776
微信小程序—自定义tabbar 官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 1.配置信息 首先要先在app.json中的 “tabbar”中加入一项
微信小程序自定义tabBar
2401_84097820的博客
04-16 617
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
微信小程序 底部菜单栏
12-29
### 微信小程序实现底部菜单栏 #### 自定义 tabBar 的配置方法 对于希望在微信小程序中创建更灵活和个性化底部导航的应用来说，自定义 `tabBar` 是一个理想的选择。官方提供的 `tabBar` 功能较为基础，因此许多开发者倾向于构建自己的版本以满足特定的需求。 #### 修改 app.json 文件 要启用自定义 `tabBar`，首先应在项目的根目录下的 `app.json` 中禁用默认的 `tabBar` 设置，并确保 `"usingComponents"` 字段被正确设置以便支持后续引入自定义组件[^1]： ```json { "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "tabBar": false, "usingComponents": {} } ``` #### 创建自定义 tabBar 组件 接着，在项目结构内新建文件夹用于存放自定义 `tabBar` 相关资源（如图片、样式表），并编写对应的 WXML 和 WXSS 文件来描述界面布局与外观设计。下面展示了一个基本的例子，其中包含了两个选项卡以及相应的图标表示法[^2]： ```html <!-- custom-tab-bar.wxml --> <view class="custom-tab-bar"> <block wx:for="{{tabs}}" wx:key="pagePath"> <navigator url="{{item.pagePath}}" data-index="{{index}}"> <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image> <text>{{item.text}}</text> </navigator> </block> </view> ``` ```css /* custom-tab-bar.wxss */ .custom-tab-bar { display: flex; position: fixed; bottom: 0; width: 100%; height: 98rpx; background-color: white; } .navigator { flex-grow: 1; text-align: center; } .image { margin-top: 16rpx; width: 48rpx; height: 48rpx; } .text { font-size: 24rpx; color: gray; } ``` #### JavaScript 控制逻辑 最后一步是在 JS 文件里处理选中的状态变化和其他交互行为。这通常涉及到监听页面加载事件 (`onLoad`) 来初始化当前激活项；同时还需要响应用户的点击操作更新视图显示[^3]： ```javascript // custom-tab-bar.js Component({ properties: {}, data: { tabs: [{ pagePath: "/pages/home/home", iconPath: "./images/icon_home.png", selectedIconPath: "./images/icon_home_selected.png", text: '首页' }, { pagePath: "/pages/user/user", iconPath: "./images/icon_user.png", selectedIconPath: "./images/icon_user_selected.png", text: '我的' }], selectedIndex: 0, // 默认选中第一个标签页 }, methods: { switchTab(e) { const { index } = e.currentTarget.dataset; this.setData({ selectedIndex: index }); // 更新路径或执行其他动作... } } }); ``` 以上就是关于如何在一个标准的小程序框架下添加自定义 `tabBar` 的指导说明。通过这种方式不仅可以获得更大的定制空间，还能更好地适应不同业务场景的要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值