微信小程序自定义tabbar

最新推荐文章于 2024-09-27 16:15:56 发布

crazyXB

最新推荐文章于 2024-09-27 16:15:56 发布

阅读量755

点赞数

文章标签：微信小程序小程序微信

本文链接：https://blog.csdn.net/crazyXB/article/details/131082164

版权

自定义tabbar在微信小程序中可以提供更灵活的样式设置，但会导致官方tabBar接口失效且可能产生闪屏问题。实现包括在app.json配置custom为true，编写自定义组件并接管渲染，以及添加全局方法来设置选中状态和控制显隐。

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

一、自定义tabbar的优缺点

优点：自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

缺点：

1、与 tabBar 样式相关的接口，如 wx.setTabBarItem 等将失效。如需进行操作，可调用getTabBar接口，再调用setData；

2、每一次重新加载后，第一次点击，都会出现闪一下的情况，后面就不会有了；

3、可能还会有意想不到的收获（bug）；

二、tabbar使用

1、在 app.json 中的 tabBar 项指定 custom ：true字段，同时其余 tabBar 相关配置也补充完整。

微信小程序修改自定义tabbar里面的数据；

"tabBar": {
    "custom": true,   // 使用自定义tabbar，必须添加custom字段
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  }

2、在代码根目录（和app.js同级）下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3、编写相关代码

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

4、添加全局方法，设置tabbar的选中，然后在需要的页面调用

 getCurrentTabbar(selected, that) {
    if (typeof that.getTabBar === 'function' && that.getTabBar()) {
      that.getTabBar().setData({
        selected: selected
      }) 
    }
  },

三、自定义tabbar的显隐控制

// wxml
<view wx:if="{{show}}">

    ...
</view>

//js
Page({
    data:{
        show:true
    },
    changeTabbarstate(){
        this.getTabBar().setData({
          show: false
        }) 
    },
})