结合Vant WeApp实现微信小程序自定义TabBar
本文最后修改于 49 天前,其中的信息可能已经有所发展或是发生改变。

前言

微信小程序原生的TabBar虽然设置简单,但是样式不好看,也不能使用字体图标,但是微信小程序有自定义TabBar的机制。

Vant WeApp是有赞出品的针对微信小程序的一套开源组件库,结合van-tabbar和微信的自定义TabBar机制可以实现一套比较好看的TabBar。

新建custom-tab-bar组件

如图所示,在微信小程序工程文件夹根目录下新建一个名为custom-tab-bar的组件。

项目结构

其中各个文件中的代码如下:

{
  "component": true,
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  }
}
// custom-tab-bar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {
    active: -1,
    list: [{
        icon: "search",
        text: "搜索",
        url: "/pages/index/index",
      },
      {
        icon: "question-o",
        text: "答题",
        url: "/pages/question/index",
      },
      {
        icon: "ellipsis",
        text: "关于",
        url: "/pages/user/index",
      },
    ],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      wx.switchTab({
        url: this.data.list[event.detail].url,
      });
    },

    init() {
      const {
        route
      } = getCurrentPages().pop();
      const active = this.data.list.findIndex(
        (item) => item.url === `/${route}`
      );
      console.log("active:", active);
      this.setData({
        active,
      });
    },
  },
});
<!-- custom-tab-bar/index.wxml -->
<van-tabbar active="{{ active }}" bind:change="onChange">
    <van-tabbar-item wx:for="{{list}}" wx:key="index" icon="{{item.icon}}">
        {{item.text}}
    </van-tabbar-item>
</van-tabbar>

启用自定义TabBar设置

修改app.jstabBar设置,设置customtrue。其中list中的对象只需保留path属性。

修改app.json

在每个Tab页中配置

在开启了自定义TabBar设置后,可以在每个页面中通过getTabBar()获取TabBar组件实例。

现在需要在每个Tab页中设置当前Tab页图标高亮。

可以在每个Tab页的onShow()生命周期方法中调用TabBar的init()方法,修改当前激活页,来高亮当前Tab页的图标。

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
  this.getTabBar().init();
},

成果展示

自定义TabBar

参考资料

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇