微信小程序自定义tarbar笔记

土豆炒洋芋
983 阅读4分钟

前言

1. 正常情况下，微信小程序自带的tabbar是可以满足绝大多数的业务需求的，但是我们也偶尔会遇到产品的tabbar会并没有想象中那么规规矩矩，比如某些权限来选择性展示tabbar，没办法，搬砖的只有听命令了。
2. 我这里用的是tarojs, taro-ui 来编译微信小程序，不管是原生还是使用taro来编译的小程序，大体过程都是一样的，有区别的地方我会特别指出。

创建自定义组件

  1. 微信官方文档中讲解很清楚，我们根据文档说的，首先在入口文件添加"custom": true，然后在pages同层级创建custom-tab-bar目录，目录下面创建index.js,index.json,index.wxss，index.wxml文件，我用的是taro，所以我只需要创建index.js和index.scss两个文件就可。

  2. 文档说需要在tab页面申明usingComponents字段，或者在全局app.js中声明，这里我没有声明好像也没有影响。

  3. taro创建的文件目录如下：

    如果你用的是微信原生的创建的目录应该是：

  4. 如果你用的是taro，那么在index.js中的就是你的组件的布局了，index.scss中就可以自定义tabbar的样式了。这里推荐按照微信文档来编写，类名都可以照抄微信的文档给的实例，这样就可以直接把样式复制过来，稍微调整下大小就可以了。

  5. 如果你用的是微信原生的，那么index.wxml中就是你自己定义的tabbar布局，index.wxss中去写自己的样式。推荐外层标签和样式都可以照抄微信demo，这样可以避免自己写样式和出错。

  6. 虽然是自己自定义的tabbar，但是tab所对应的页面依然需要在全局配置文件app.js中的tabbar中进行配置，有些同学觉得既然展示自定义的tabbar，那么自带的tabbar中配置与否都无所谓了，这里仍然是需要的，具体原因不知。自定义的tabbar中的页面路径是绝对路径，而全局配置文件中是相对路径，这点试一下就出来了。

书写跳转逻辑

  1. 将当前选中的数组下标index赋值给tabIndex变量，用来展示当前文字和图片的选中态。方法switch就是tab跳转的同时，将tabIndex变量赋值。
list: [
      {
        text: '公告',
        pagePath: '/pages/announcement/index',
        iconPath: '../images/tab/gonggao.png',
        selectedIconPath: '../images/tab/active/gonggao.png'
      },
      {
        pagePath: "/pages/new_community/index",
        text: '伙计',
        iconPath: '../images/tab/shequ.png',
        selectedIconPath: '../images/tab/active/shequ.png'
      },
      {
        pagePath: "/pages/orders/index",
        text: "订单",
        iconPath: '../images/tab/dingdan.png',
        selectedIconPath: '../images/tab/active/dingdan.png'
      },{
        pagePath: "/pages/user/index",
        text: '我的',
        iconPath: '../images/tab/wode.png',
        selectedIconPath: '../images/tab/active/wode.png'
      }
    ]

switch跳转：

switchTab(path,index){
    this.setState({
      tabIndex: index
    })
    Taro.switchTab({
      url: path
    })
  }

<CoverView className='tab-bar'>
        <CoverView className='tab-bar-border'></CoverView>
        {
          list.map((items,index) =>(
            <CoverView key='text' className='tab-bar-item' onClick={this.switchTab.bind(this, items.pagePath, index)}>
              <CoverImage src={tabIndex === index ? items.selectedIconPath : items.iconPath}></CoverImage>
              <CoverView className={tabIndex === index ? 'selectedColor' : 'color'}>{items.text}</CoverView>
            </CoverView>
          ))
        }
      </CoverView>
  1. 到这一步，你的开发者工具就应该出现了自定义的tabbar了，如果没出现，那就看看全局配置文件中的"cutom: true"是否配置了。还有usingComponents字段也记得加上，避免出错。

点击跳转的时候tabbar会闪，而且选中状态值会初始化。

我们在tabbar页相互跳转的同时，tabbar自定义组件也在不断初始化，所以每次选中的数组下标值都会变成初始值，这里我们可以使用微信提供的getTarBar()方法来修改，这个方法是获取tarbar的实例。

微信原生

我们在每个tabbar的页面生命周期onLaunch中调用getTarBar()方法来设置选中的下标值就行。

if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          tabIndex: 1  // 这里就是当前页在数组中的下标
        })
      }

taro

在taro中我们使用this.getTarBar()方法会报undefined，我们需要使用this.$scope.getTarBar()来获取实例，同时需要更新选中值。(这里需要加$component才能进行更新)

if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
      this.$scope.getTabBar().$component.setState({
        tabIndex: 3  //数字是当前页面在tabbar的索引
      })
    }

总结

自定义tabbar看起来是要覆盖原生的组件，似乎很难，但是文档也给了我们demo，按照demo先把文件都创建好，然后再来排查问题，这里需要注意是，有些同学会看见两个tarBar，需要在app.js中的onLaunch函数中使用wx.hideTabBar()来进行隐藏，我这里没遇到，所以没使用，遇到的可以试试，以上就是自定义tarbar的全过程。

avatar
文章
阅读
粉丝