微信小程序custom-tab-bar

1. 安装tdesign-miniprogram

创建package.json 创建终端执行命令 npm i tdesign-miniprogram -S --production

配置project.config.json

json 复制代码

"setting": {
 "packNpmRelationList": [
   {
     "packageJsonPath": "package.json",
     "miniprogramNpmDistDir": "./"
   }
 ],
 "packNpmManually": true,
 },

选择工具-> 构建npm

配置app.json

css 复制代码

"usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  },

自定义主题配置app.wxss

css 复制代码

page {
  --td-primary-color-7: rgb(12, 200, 164); /* 基础颜色 */
  --td-primary-color-8: rgb(12, 200, 164); /* 按下颜色 */
}

2. 自定义底部导航栏

文件夹custom-tab-bar

是一个组件 index.json apply-shared为了自定义css使用

json 复制代码

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

index.wxml 自定义主题需要加一层view

ini 复制代码

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

index.wxss

css 复制代码

.wrapper {
--td-tab-bar-active-color: rgb(12, 200, 164);
}

index.js

javascript 复制代码

methods: {
  onChange(e) {
    wx.switchTab({
      url: `/pages/${e.detail.value}/index`,
    })
    this.setData({
      value: e.detail.value,
    });
  },
},

配置app.json pages： 里面每一个都是组件 tabBar：配置custom和list

json 复制代码

 "pages": [
  "pages/policy/index",
  "pages/data/index",
  "pages/me/index",
  "pages/login/login"
],
"tabBar": {
  "custom": true,
  "list": [
    {
      "pagePath": "pages/policy/index",
      "text": "策略"
    },
    {
      "pagePath": "pages/data/index",
      "text": "数据"
    },
    {
      "pagePath": "pages/me/index",
      "text": "我的"
    }
  ]
},

pages/policy/index 代码 index.json

json 复制代码

{
"usingComponents": {}
}

index.js 是一个Component, 填写pageLifetimes 回调

javascript 复制代码

Component({
    pageLifetimes: {
      show() {
        if (typeof this.getTabBar === 'function' &&
          this.getTabBar()) {
          this.getTabBar().setData({
            value: 'policy'
          })
        }
      }
    },
})