当前位置：网站首页>微信小程序自定义tabbar

微信小程序自定义tabbar

2022-08-06 10:28:00 【小小的梦想101】

微信小程序自定义Tabbar官方网址

启动自定义Tabbr

在这里插入图片描述

配置自定义tabbar

全局注册

先在app.json文件中的tabbar属性中的list属性中写入，你需要使用的tabbar页面的信息如下图。
在这里插入图片描述

2.配置自定义组件

在根目录下创建custom-tab-bar文件夹，并生成对应的组件。
在这里插入图片描述
在custom-tab-bar文件夹中定义好自己的自定义tabbar。我们就可以看到下面的内容以及成功的显示。

3.配置每个页面的getTabBar

前往你的tabbar页面的js文件中，找到onshow函数，在函数中添加如下代码
在这里插入图片描述
上图是组件，下面是页面

      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
    
        this.getTabBar().setData({
    
          selected: 0  // 注意这里：需要配置成你自定义组件页面中对应的变量
        })
      }

原网站

版权声明
本文为[小小的梦想101]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_46740017/article/details/126103448