微信小程序—子页面显示tabbar（自定义组件），样式和app.json定义的tabBar相同

最新推荐文章于 2024-07-25 08:15:00 发布

Poppy_LYT

最新推荐文章于 2024-07-25 08:15:00 发布

阅读量9.6k

点赞数 7

分类专栏：微信小程序文章标签：自定义tabbar组件子页面显示小程序

本文链接：https://blog.csdn.net/Poppy_LYT/article/details/104437363

版权

本文介绍如何在微信小程序中实现在子页面显示与app.json定义的tabBar样式一致的自定义tabBar组件。通过创建并引入自定义组件，调整样式和配置，使得子页面也能展示功能齐全的底部导航栏。

摘要由CSDN通过智能技术生成

注意：在app.json里直接增加tabBar只是首页的几个页面进行切换才会显示，但是如果想在子页面也显示就需要自定义tabbar组件，在想使用的子页面按下面的方法引入就可以了

1、自定义tabBar组件

注意：可以新建一个目录叫做components，专门放封装好的组件，注意在tabbar目录里新建Component（组件），而不是新建Page
在这里插入图片描述

2、tabbar.wxml

<view class="tab-bar">   
  <block wx:for="{
  {tabBar}}" wx:key="{
  {tabBar.pagePath}}">    
  // data-url 传递参数，可以在navigateDetail方法中的e.currentTarget.dataset.url获取，在tabbar.js代码块中可以看到
    <view class="section_item" bindtap="navigateDetail" data-url="{
  {item.pagePath}}">  
        <image class="section_image" src="{
  {item.iconPath}}"></image&g