微信小程序封装自定义tabbar，子页面显示tabbar，主页面也可设置（建议使用小程序原有tabbar），仅个人使用

最新推荐文章于 2025-04-23 15:31:11 发布

kristen999

最新推荐文章于 2025-04-23 15:31:11 发布

阅读量5.9k

点赞数 9

本文链接：https://blog.youkuaiyun.com/kristen999/article/details/119177845

版权

本文介绍了如何在微信小程序中封装自定义tabbar，并在主页面和子页面中使用。首先在components目录下创建tabbar组件，然后编写wxml、wxss、json和js代码。接着在子页面如notice中引入tabbar，通过配置json和wxml实现。若要在主页面更改小程序自带tabbar，只需在app.json中设置'custom': true，并按相同步骤引入自定义tabbar。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近刚开始着手写小程序，无奈太菜了，实在是搞不出来，就只能从网上东拼西凑一个，目前看来算是一个还不错的tabbar，留着自用；

最终实现效果：主页面

子页面

1、首先新建一个组件，用来存放公用的tabbar

具体新建过程：目录根部右击创建文件夹components，再右击components =>新建文件夹，然后定义名字为tabbar，右击tabbar =>创建组件，tabbar组件便创建成功

2、组件创建好后，开始编写具体实现功能代码

wxml：

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>  
  <cover-view wx:for="{
  {list}}" wx:key="index" class="section_item" data-path="{
  {item.pagePath}}" data-index="{
  {index}}" bindtap="switchTab">
    <cover-image class="section_image" src=&

最低0.47元/天解锁文章