Κοινή χρήση τεχνολογίας

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

Εφαρμογή προσαρμογής στο μίνι πρόγραμμα WeChat tabBar Μπορεί να παρέχει ένα πιο ευέλικτο και εξατομικευμένο μενού πλοήγησης στο κάτω μέρος για την εφαρμογή σας.Λόγω του επίσημου μίνι προγράμματος WeChattabBar Περιορισμένες δυνατότητες διαμόρφωσης, προσαρμογήtabBar Έχει γίνει η επιλογή πολλών προγραμματιστών να εφαρμόσουν πολύπλοκη πλοήγηση στο κάτω μέρος.Το παρακάτω είναι ένα απλό παράδειγμα του τρόπου εφαρμογής προσαρμογής σε ένα μίνι πρόγραμμαtabBar。

Βήμα 1: Διαμορφώστε το app.json

Πρώτα, πρέπει app.json Μεσαία διαμόρφωσηtabBar βασικές πληροφορίες, αλλάcustom Το πεδίο πρέπει να ρυθμιστεί σεtrue για να ενεργοποιήσετε την προσαρμογήtabBar。

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

Βήμα 2: Δημιουργήστε ένα προσαρμοσμένο στοιχείο tabBar

Δημιουργήστε ένα αρχείο με όνομα custom-tab-bar φάκελο και δημιουργήστε τα απαιτούμενα αρχεία σε αυτόν (π.index.js、index.json、index.wxml、index.wxss）。

index.js

Εδώ μπορεί να γίνει επεξεργασία λογικής, όπως εναλλαγή καρτελών με βάση την τρέχουσα σελίδα.

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

Καθορίστε τις πληροφορίες διαμόρφωσης του στοιχείου.

{
  "usingComponents": {}
}
1
2
3

ευρετήριο.wxml

Ορίστε τη δομή του 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

ευρετήριο.wxss

Προσθέστε στυλ.

.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

Βήμα 3: Χρησιμοποιήστε προσαρμοσμένη tabBar στο app.js

υπάρχει app.js Εισαγάγετε και χρησιμοποιήστε το προσαρμοσμένο στοιχείο tabBar.

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