微信小程序中使用 TDesign 自定义 TabBar-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序中使用 TDesign 自定义 TabBar。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、按照小程序官方文档配置 TabBar（app.json文件内）

{
  "pages": [
    "pages/home/index",
    "pages/curriculum/index"
  ],
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/curriculum/index",
        "text": "课程"
      }
    ]
  }
}

二、在小程序根目录（与 pages 平级）新建 custom-tab-bar（必须使用此名称）文件夹

微信小程序中使用 TDesign 自定义 TabBar

三、右击 custom-tab-bar 文件夹 > 新建 Component （新建名称必须为 index）

微信小程序中使用 TDesign 自定义 TabBar

四、custom-tab-bar > index.wxml

<t-tab-bar value="{{value}}" bindchange="onChange" theme="tag" split="{{false}}">
    <t-tab-bar-item wx:for="{{tabBar}}" wx:for-item="item" wx:for-index="index" wx:key="index" icon="{{item.icon}}" value="{{item.value}}">
        {{item.label}}
    </t-tab-bar-item>
</t-tab-bar>

五、custom-tab-bar > index.ts

Component({
  //  组件的属性列表
  properties: { },
  //  组件的初始数据
  data: {
    value: '/pages/home/index',
    tabBar: [{
      value: '/pages/home/index',
      icon: 'home',
      label: '首页',
    }, {
      value: '/pages/curriculum/index',
      icon: 'file',
      label: '课程',
    }]
  },
  //  组件的方法列表
  methods: {
    onChange(e: any) {
      wx.switchTab({
        url: e.detail.value
      });
    }
  }
})

六、custom-tab-bar > index.josn

{
    "component": true,
    "usingComponents": {
      "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
      "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"
    }
}

七、实现 tabBar 选中态

根据微信官方文档描述，每个 tab 页下的自定义 tabBar 组件实例是不同的;
如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态

在使用到 TabBar 的页面中加入以下代码文章来源地址https://www.toymoban.com/news/detail-475462.html

onShow() {
  if (typeof this.getTabBar === 'function' && this.getTabBar()) {
    const page: any = getCurrentPages().pop();
    this.getTabBar().setData({
      value: '/' + page.route
    })
  }
}