El subprograma WeChat de uin-app personaliza el ejemplo simple de implementación del menú inferior de la barra de pestañas (notas de trabajo)

2024-07-12

Implementar personalización en el mini programa WeChat tabBar Puede proporcionar un menú de navegación inferior más flexible y personalizado para su aplicación.Debido al mini programa oficial de WeChattabBar Capacidades de configuración limitadas, personalización.tabBar Se ha convertido en la elección de muchos desarrolladores implementar una navegación inferior compleja.El siguiente es un ejemplo simple de cómo implementar la personalización en un mini programa.tabBar。

Paso 1: configurar app.json

Primero, necesitas app.json Configuración mediatabBar información básica, perocustom El campo debe configurarse entrue para permitir la personalizacióntabBar。

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

Paso 2: crear un componente tabBar personalizado

Crea un archivo llamado custom-tab-bar carpeta y cree los archivos necesarios en ella (p. ej.index.js、index.json、index.wxml、index.wxss）。

índice.js

Aquí se puede procesar la lógica, como cambiar de pestaña según la página actual.

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

índice.json

Defina la información de configuración del componente.

{
  "usingComponents": {}
}
1
2
3

índice.wxml

Defina la estructura 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

índice.wxss

Añade estilo.

.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

Paso 3: use la barra de pestañas personalizada en app.js

existir app.js Introduzca y utilice el componente tabBar personalizado.

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

Compartir tecnología