Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Implémenter la personnalisation dans le mini-programme WeChat tabBar Il peut fournir un menu de navigation inférieur plus flexible et personnalisé pour votre application.En raison du mini programme officiel WeChattabBar Capacités de configuration limitées, personnalisationtabBar C'est devenu le choix de nombreux développeurs d'implémenter une navigation inférieure complexe.Ce qui suit est un exemple simple de la façon d'implémenter la personnalisation dans un mini-programmetabBar。

Étape 1 : Configurer app.json

Tout d'abord, vous devez app.json Configuration moyennetabBar informations de base, maiscustom Le champ doit être défini surtrue pour activer la personnalisationtabBar。

{
  "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

Étape 2 : Créer un composant tabBar personnalisé

Créez un fichier nommé custom-tab-bar dossier et créez-y les fichiers requis (par ex.index.js、index.json、index.wxml、index.wxss）。

index.js

La logique peut être traitée ici, comme changer d'onglet en fonction de la page actuelle.

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

Définissez les informations de configuration du composant.

{
  "usingComponents": {}
}
1
2
3

index.wxml

Définissez la structure de 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

Ajoutez du style.

.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

Étape 3 : Utilisez la tabBar personnalisée dans app.js

exister app.js Introduisez et utilisez le composant tabBar personnalisé.

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