微信小程序中集成有赞UI自定义Tabbar组件

发表于   |   分类于   |  

最近在折腾微信小程序开发。关于自定义Tabbar的时候折腾了好久。

一开始只是想换几个好看的Tabbar使用下，根据官方的说法

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

so 动心了，开搞！ 不过官方的说明文件是真简单，看完后一脸懵逼 Tabbar地址 还是玩不转。最后折腾了好久，还是写个记录吧！

这里我选择使用了有赞的小程序框架 地址， 你可以自己写或者使用自己喜欢的UI框架都可以，使用方法都是一样的。

版本说明：当前微信开发者工具版本 1.02.1911180，版本库 v1.9.0+

安装vant-app组件

1.通过 npm 安装

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

2.通过 yarn 安装

1
yarn add @vant/weapp --production

3.安装 0.x 版本

1
npm i vant-weapp -S --production

4.直接github下载文件放到自己需要的地方，比如放到你的小程序根目录下，如下图

route1

新建个项目测试

选择使用测试账户创建一个项目，默认会有2个页面 index 和 logs，就用这2个测试。

在 app.json 文件中的 页面属性如下

1
2
3
4
"pages": [
    "pages/index/index",
    "pages/logs/logs"
],

这个时候访问你可以看到index页面的内容了。

在根目录下新建一个文件夹 images 里面随便放几个logo使用。

修改小程序Tabbar配置

根据官方配置来

1.在 app.json 文件中找到 tabBar 项的配置，指定其中的 custom 属性为 true,同时填写 list 属性配置，不能为空。

2.所有 tab 页的json里需要声明 usingComponents 项，也可以在 app.json 中进行全局声明，当然是选择这种啦！不过创建页面的时候默认的当前页json文件中已经引入了该项不需要配置什么。

改完后 app.json 文件中的相关配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"tabBar": {
    "custom": true,
    "list": [
        {
            "pagePath": "pages/index/index",
            "iconPath": "images/home1.png",
            "selectedIconPath": "images/home2.png",
            "text": "home"
        },
        {
            "pagePath": "pages/logs/logs",
            "iconPath": "images/log1.png",
            "selectedIconPath": "images/log2.png",
            "text": "logs"
        }
    ]
},
"usingComponents": {},

添加自定义Tabbar代码文件

在根目录下创建 custom-tab-bar 文件夹并新建 Component 命名 index，这个时候你的目录结构应该是这样

route2

注意一定是要创建的 Component, 不是新建的Page。

1.修改 custom-tab-bar/index.js 文件，增加如下代码

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
Component({
  data: {
    active: 0, // 当前选中第几个tab
  },
  // 组件的方法列表
  methods: {
    onChange: function (event) {
      // event.detail是vant-app的tabbar组件选择的序号
      // 相当于获取点击van-tabbar-item的序号      
      if (event.detail == 0) {
        this.switchTab("/pages/index/index");
        // 设置选中
        this.setData({
          active: event.detail
        });      
      } else {
        this.switchTab("/pages/logs/logs");
        // 设置选中
        this.setData({
          active: event.detail
        });
      }   
    },
    // 自定义tab切换方法增加回调
    switchTab: function (url, callback) {
      if (callback) {
        callback();
      }
      // 调用微信的switchTab切换tabbar
      wx.switchTab({url});
    }
  }
});

2.修改 custom-tab-bar/index.json 文件，引入对应的有赞tabbar组件，增加如下代码：

1
2
3
4
5
6
7
{
  "component": true,
  "usingComponents": {
    "van-tabbar": "/vant-weapp/tabbar/index",
    "van-tabbar-item": "/vant-weapp/tabbar-item/index"
  }
}

3.修改 custom-tab-bar/index.wxml 文件，增加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item>
    <image style="height: 24px; width: 24px;" slot="icon" src="/images/home1.png" mode="aspectFit" />
    <image style="height: 24px; width: 24px;" slot="icon-active" src="/images/home2.png" mode="aspectFit" />
    我是home
  </van-tabbar-item>
  <van-tabbar-item info="{{ show_num }}">
    <image style="height: 24px; width: 24px;" slot="icon" src="/images/user1.png" mode="aspectFit" />
    <image style="height: 24px; width: 24px;" slot="icon-active" src="/images/user2.png" mode="aspectFit" />
    我是logs
  </van-tabbar-item>
</van-tabbar>

其中显示的文案你也可以按自己的需要改成动态配置的。当然你也可以定义icon右上角的小红点或者提示文字之类的东西，详情看 这里

4.修改对应的 Page 在其中的 onShow() 方法中进行tabbar的初始化

比如我这里是test1和test2这两个页面，那就在这2个页面对应的js文件中找到 onShow方法，添加如下代码

1
2
3
4
5
6
7
8
9
10
11
/**
* 生命周期函数--监听页面显示
* 注意设置的active 这个就是对应的当前页面对应的tab索引，是几就写0，这个是初始化默认选中用的，索引从0开始
*/
onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
        this.getTabBar().setData({
            active: 0
        });
    }
},

所以我在 test1.js 文件中设置的 active=0, 在 test2.js 文件中设置的 active=1。

现在保存重新编译来看下效果吧。

result1

result2

-------------The End-------------