uni-app入门:自定义tabbar

    本文介绍如何使用vant Weapp定义自定义tabbar.按照自定义图标的方式进行添加:

    自定义tabbar微信官方链接:
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
1.导入vant weapp并构建npm
    项目根目录右键选择外部终端窗口中打开

    执行如下命令:

npm i @vant/weapp@1.3.3 -S --production
1

    构建npm:微信开发者工具选择工具–构建npm.
    vant weapp详细添加步骤以及注意事项总结参考:uni-app入门:小程序UI组件Vant Weapp.
2 app.json中添加如下内容:

{
  "tabBar": {
    "custom": true, 
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {
 "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

     "custom": true 表示启用自定义tabbar.
     usingComponents中添加引用vant weapp中自定义tabbar组件.
3 添加 tabBar 代码文件
    项目根目录创建文件夹:custom-tab-bar,该文件夹下创建index组件,自动生成以下四个文件:
    index.js
    index.json
    index.wxml
    index.wxss
4.选择vant weapp中的自定义tabbar进行导入
    index.wxml中添加自定义tabbar

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item info="3">
    <image
      slot="icon"
      src="{{ icon.normal }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ icon.active }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    自定义
  </van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    index.js中的component中按照vant weapp中要求添加以下内容:

Component({
  data: {
    active: 0,
    icon: {
      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
      active: 'https://img.yzcdn.cn/vant/user-active.png',
    },
    "list": [{
      "pagePath": "/pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "/pages/logs/logs",
      "text": "搜索"
    },
    {
      "pagePath": "/pages/mine/mine",
      "text": "我的"
    }]
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
 onChange(event) {
    this.setData({ active: event.detail });
  }
})

  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

    至此,自定义tabbar组件完成,效果展示如下,可以按照需求修改描述以及对应的图标.