微信小程序 - 自定义tabBar

微信小程序默认的tabBar只能提供给开发者修改下颜色,然后就没了。

有的人想要最求个性化的tabBar,比如想要在tab中间加一个巨大的扫码按钮,这是很常见的。那么这时候,自定义tabBar就派上用场了。

做过小程序的应该都知道,定义默认样式的tabBar可以在app.json 的tabBar 属性中定义配置tabBar,如下:

{
    ...
    "tabBar": {
    "color": "#666666",
    "selectedColor": "#4d8970",
    "borderStyle": "black",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/icon2/home1.png",
        "selectedIconPath": "images/icon2/home2.png"
      },
      {
        "pagePath": "pages/classy/classy",
        "text": "分类",
        "iconPath": "images/icon2/classy1.png",
        "selectedIconPath": "images/icon2/classy2.png"
      }
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/icon2/mine1.png",
        "selectedIconPath": "images/icon2/mine2.png"
      }
    ]
  },
}

一、自定义tabBar实现

1、将tabBar配置为自定义,custom: true

{
    ...
    "tabBar": {
        "custom": true
    },
}

使用自定义tabBar为什么需要添加 custom 属性并且配置为true呢,大家可以尝试在配置了默认tabBar的基础上添加custom并配置为true,可以发现,默认的tabBar消失了,尽管你配置的tabBar信息。配置为true只是为我们自定义让出位置。

 

2、编写自定义tabBar组件

在根目录添加自定义tabBar文件(名字路径有严格要求)

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

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

实际上,即使没有tabBar,只要我们在app.json中的tabBar属性中定义为了tabBar页就可以通过 wx.switchTab的api进行切换tabBar页

所以我们可以在自定义tabBar组件中通过wx.switchTab切换页面即可。

 

可参考官方文档:传送门

 

 

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读