20.自定义tabBar(使用vant中的tabbar)_van-tabbar-item

作者：小蓝xlanll | 2024-03-16 00:53:43

踩

van-tabbar-item

自定义tabBar就是不用官方提供的tabBar了，而是自己搞

1 配置

首先你需要在项目根目录中创建名为 custom-tab-bar 的文件夹，然后在其中创建名为 index 的组件

custom-tab-bar名称固定
index名称固定

之后你需要在app.json节点下，加入custom:true

然后你进入到list包含的页面中，就可以看到自定义tabBar了

这里的内容是与index.wxml一样的

2 使用vant组件库做TabBar

2.1 引入组件

2.2 使用组件

比如我们想用基础用法的这个tabbar，那就把这段代码复制下来

然后将他们搞到 custom-tab-bar/index中

然后就看到了自定义的tabbar了

当你点击第二个tabbar的时候，第二个tabbar就会高亮显示

2.3 自定义图标

自定义图标就要用这个东西

首先搞wxml，我当前的index.wxml是这样的


<!--custom-tab-bar/index.wxml-->
<!-- <van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar> -->
 
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item info="3">
    <image
      slot="icon"
      src="{{ icon.index_normal }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ icon.index_activate }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    主页
  </van-tabbar-item>
  <van-tabbar-item info="3">
    <image
      slot="icon"
      src="{{ icon.logs_normal }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ icon.log_activate }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    日志
  </van-tabbar-item>
</van-tabbar>

然后搞index.js，我当前的index.js是这样的


// custom-tab-bar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
 
  },
 
  /**
   * 组件的初始数据
   */
  data: {
    active:0,
    icon:{
      index_normal:"/src/tabBar_icon/not_activate_home.png",
      index_activate:"/src/tabBar_icon/activate_home.png",
      logs_normal:"/src/tabBar_icon/not_activate_log.png",
      log_activate:"/src/tabBar_icon/activate_log.png",
    }
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      this.setData({active:event.detail})
    }
  }
})