uin-app WeChat-Applet passt die Implementierung des unteren TabBar-Menüs an, einfaches Beispiel (Arbeitsnotizen)

uin-app WeChat-Applet passt die Implementierung des unteren Menüs der TabBar an, einfaches Beispiel (Arbeitsnotizen)

2024-07-12

Implementieren Sie die Anpassung im WeChat-Miniprogramm tabBar Es kann ein flexibleres und personalisierteres unteres Navigationsmenü für Ihre Anwendung bereitstellen.Aufgrund des offiziellen WeChat-MiniprogrammstabBar Begrenzte Konfigurationsmöglichkeiten, individuelle AnpassungtabBar Viele Entwickler entscheiden sich für die Implementierung einer komplexen unteren Navigation.Im Folgenden finden Sie ein einfaches Beispiel für die Implementierung einer Anpassung in einem MiniprogrammtabBar。

Schritt 1: app.json konfigurieren

Zuerst müssen Sie app.json Mittlere KonfigurationtabBar grundlegende Informationen, abercustom Das Feld muss auf eingestellt werdentrue um die Anpassung zu ermöglichentabBar。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/profile/profile"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的"
      }
    ],
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black"
  }
}
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

Schritt 2: Erstellen Sie eine benutzerdefinierte tabBar-Komponente

Erstellen Sie eine Datei mit dem Namen custom-tab-bar Ordner und erstellen Sie darin die benötigten Dateien (z.B.index.js、index.json、index.wxml、index.wxss）。

index.js

Hier kann Logik verarbeitet werden, beispielsweise das Wechseln von Tabs basierend auf der aktuellen Seite.

Component({
  data: {
    selected: 0,
    list: [{
      pagePath: '/pages/index/index',
      text: '首页'
    }, {
      pagePath: '/pages/logs/logs',
      text: '日志'
    }, {
      pagePath: '/pages/profile/profile',
      text: '我的'
    }]
  },
  methods: {
    switchTab: function(e) {
      const data = e.currentTarget.dataset;
      if (this.data.selected === data.index) return;
      wx.switchTab({url: data.path});
    },
    onShow: function(e) {
      // 当 tabBar 显示时触发，可以根据需要获取当前页面路径
      const { path } = getCurrentPages().pop();
      this.setData({
        selected: this.data.list.findIndex(tab => tab.pagePath === path)
      });
    }
  }
});
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

index.json

Definieren Sie die Konfigurationsinformationen der Komponente.

{
  "usingComponents": {}
}
1
2
3

index.wxml

Definieren Sie die Struktur von tabBar.

<view class="tab-bar">
  <block wx:for="{{list}}" wx:key="index" wx:for-index="idx">
    <view class="tab-item {{selected === idx ? 'active' : ''}}" data-path="{{item.pagePath}}" data-index="{{idx}}" bindtap="switchTab">
      {{item.text}}
    </view>
  </block>
</view>
1
2
3
4
5
6
7

index.wxss

Stil hinzufügen.

.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
}

.tab-item {
  padding: 10px 0;
  text-align: center;
}

.tab-item.active {
  color: #3cc51f;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Schritt 3: Benutzerdefinierte tabBar in app.js verwenden

existieren app.js Einführung und Verwendung der benutzerdefinierten tabBar-Komponente.

App({
  onLaunch: function () {
    // 在这里可以执行一些启动时的逻辑
  },
  usingComponents: {
    '不同角色，控制查看底部菜单权限
    实现效果1：实体店![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/2ca6098eefaf4d55935d9eb8d44116fb.png)
实现效果2：回收公司
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/da1d7b225c064d3ab058176211f65833.png)

1
2
3
4
5
6
7
8
9
10

Technologieaustausch