uin-app WeChat applet mengkustomisasi penerapan menu bawah tabBar contoh sederhana (catatan kerja)

uin-app WeChat applet mengkustomisasi implementasi menu bawah tabBar contoh sederhana (catatan kerja)

2024-07-12

Terapkan penyesuaian dalam program mini WeChat tabBar Ini dapat memberikan menu navigasi bawah yang lebih fleksibel dan personal untuk aplikasi Anda.Karena program mini WeChat resmitabBar Kemampuan konfigurasi terbatas, penyesuaiantabBar Ini telah menjadi pilihan banyak pengembang untuk menerapkan navigasi bawah yang kompleks.Berikut ini adalah contoh sederhana bagaimana menerapkan kustomisasi dalam sebuah program minitabBar。

Langkah 1: Konfigurasikan app.json

Pertama, Anda perlu melakukannya app.json Konfigurasi sedangtabBar informasi dasar, tapicustom Bidang perlu disetel ketrue untuk mengaktifkan penyesuaiantabBar。

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

Langkah 2: Buat komponen tabBar khusus

Buat file bernama custom-tab-bar folder dan buat file yang diperlukan di dalamnya (mis.index.js、index.json、index.wxml、index.wxss）。

indeks.js

Logikanya bisa diproses di sini, seperti berpindah tab berdasarkan halaman saat ini.

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

indeks.json

Tentukan informasi konfigurasi komponen.

{
  "usingComponents": {}
}
1
2
3

indeks.wxml

Tentukan struktur 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

indeks.wxss

Tambahkan gaya.

.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

Langkah 3: Gunakan tabBar khusus di app.js

ada app.js Perkenalkan dan gunakan komponen tabBar khusus.

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

Berbagi teknologi