add file

commpents/te_navbar/index.js

@@ -0,0 +1,36 @@
+// commpents/te_navbar/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    navbarData: {   //navbarData   由父页面传递的数据，变量名字自命名
+      type: Object,
+      value: {
+        showCapsule: 1, //是否显示胶囊
+        title: '标题文字', //导航栏 中间的标题}
+      }
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onBack() {
+      wx.navigateBack();
+    },
+    onGoHome() {
+      wx.reLaunch({
+        url: '/Pages/index/index',
+      });
+    },
+  },
+})

commpents/te_navbar/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar",
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}

commpents/te_navbar/index.wxml

@@ -0,0 +1,33 @@
+<!-- 显示胶囊，返回和home -->
+<t-navbar title="{{navbarData.title}}" wx:if="{{navbarData.showCapsule == 1}}">
+  <view slot="capsule" class="custom-capsule">
+    <t-icon
+      size="20"
+      bind:tap="onBack"
+      aria-role="button"
+      aria-label="返回"
+      name="chevron-left"
+      class="custom-capsule__icon"
+    />
+    <t-icon
+      size="20"
+      bind:tap="onGoHome"
+      aria-role="button"
+      aria-label="首页"
+      name="home"
+      class="custom-capsule__icon"
+    />
+  </view>
+</t-navbar>
+<!-- 仅显示返回 -->
+<view class="block" wx:if="{{navbarData.showCapsule == 2}}">
+  <t-navbar class="block" title="{{navbarData.title}}" left-arrow bind:go-back="onBack" />
+</view>
+<!-- 仅显示home -->
+<view class="block" wx:if="{{navbarData.showCapsule == 3}}">
+  <t-navbar class="block" title="{{navbarData.title}}" home bind:go-back="onGoHome" />
+</view>
+<!-- 都不显示 -->
+<view class="block" wx:if="{{navbarData.showCapsule == 0}}">
+  <t-navbar class="block" title="{{navbarData.title}}" />
+</view>

commpents/te_navbar/index.wxss

@@ -0,0 +1,23 @@
+.custom-capsule {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.custom-capsule__icon {
+  flex: 1;
+  position: relative;
+}
+
+.custom-capsule__icon + .custom-capsule__icon:before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: -1px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 36rpx;
+  background: #e7e7e7;
+}