Vous apprendre étape par étape comment personnaliser la barre de navigation inférieure de l'applet WeChat

Comment personnaliser la barre de navigation inférieure de l'applet WeChat ? L'article suivant vous présentera la méthode d'implémentation spécifique de personnalisation de la barre de navigation inférieure. J'espère qu'il vous sera utile !

WeChat prend en charge la barre de navigation personnalisée pour obtenir une barre de navigation inférieure flexible. Une description simple est donnée dans le document officiel, mais elle n'est pas trop spécifique. Ici, je vais vous aider à compléter votre personnalisation étape par étape. implémentation du code. Définissez l’implémentation spécifique de la barre de navigation inférieure. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]

Présentation de colorui

https://github.com/weilanwl/ColorUI

Visitez ce site Web et téléchargez la bibliothèque de composants colorui

Télécharger après en descendant, placez le dossier colorui dans le dossier demo dans votre projet d'applet

Introduction aux paramètres

@import 'colorui/main.wxss';
@import 'colorui/icon.wxss';
@import 'colorui/animation.wxss';

Mettez le code ci-dessus dans le fichier app.wxss (Le code ci-dessus Remplissez le chemin selon votre chemin actuel)

L'introduction de colorui est réussie. J'utilise ici le composant de style de colorui. En fait, c'est la même chose avec d'autres méthodes, ou vous pouvez écrire vous-même le style de la barre de navigation inférieure

. Créez une barre de navigation inférieure personnalisée Composants

Nous créons d'abord un dossier de composants personnalisé **custom-tab-bar. **N'oubliez pas que le nom du dossier de la barre de navigation inférieure personnalisée doit être celui-ci et ne peut pas être modifié par autre chose, sinon le l'applet ne sera pas reconnue.

Ensuite, nous créons deux pages (accueil, mon) sous Pages, qui sont utilisées comme deux pages de commutation pour la barre de navigation

paramètres du fichier app.json

Ne pas utiliser de mini-programmes pour le paramètre par défaut de la barre de navigation, vous devez définir l'attribut personnalisé de tabBar sur true dans le fichier app.json

Le code spécifique est le suivant :

"tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "images/icon/basics.png",
        "selectedIconPath": "images/icon/basics_cur.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/icon/component.png",
        "selectedIconPath": "images/icon/component_cur.png"
      }
    ]
  },

Il convient de noter ici que la liste doit également être définie, et le chemin de la page dans la liste sera configuré pour vous. La page à onglet spécifique qui doit être configurée. Je n'ai défini que deux onglets ici, j'en ai donc configuré deux. Après avoir configuré plusieurs onglets, configurez-en quelques-uns. pagePath, d'autres champs de la liste peuvent être configurés selon vos propres ajouts et soustractions sont requis.

Écrivez la logique de code spécifique de la barre de navigation

L'implémentation spécifique du composant de la barre de navigation

1. Paramétrage initial des données du composant

**// custome-tab-bar/index.js**
/**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    list: [{
        "pagePath": "/pages/home/home",
        "text": "首页",
        "iconPath": "/images/icon/basics.png",
        "selectedIconPath": "/images/icon/basics_cur.png"
      },
      {
        "pagePath": "/pages/my/my",
        "text": "我的",
        "iconPath": "/images/icon/component.png",
        "selectedIconPath": "/images/icon/component_cur.png"
      }
    ]
  }

Vous pouvez voir ici qu'il est à peu près le même que le paramètres dans app.json, mais les données réelles de la liste sont en fait obtenues ici au lieu de app.json. C'est la clé pour implémenter des composants personnalisés, vous pouvez donc avoir des questions puisque app.json n'est pas utilisé, pourquoi en avez-vous besoin. le définir dans app.json ? Après avoir vérifié ici, c'est l'exigence standard du mini-programme, et nous ne pouvons que nous y conformer.

2. Implémentation du code de la page de la barre de navigation des composants

<!--custom-tab-bar/index.wxml-->
<view class="cu-bar tabbar">
  <view wx:for="{{list}}" wx:key="index" class="action" data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">
    <view class="cuIcon-cu-image">
      <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
    </view>
    <view class="text-green">{{item.text}}</view>
  </view>
</view>

Voici le style de colorui utilisé. Nous comparons le bit d'index de chaque donnée de la liste avec la valeur sélectionnée pour obtenir l'effet de changement de style de bouton Passer par l'événement switchTab. pour réaliser le changement de page à onglet.

3. Implémentation du code d'événement de changement de composant

/**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
    
      wx.switchTab({
        url
      })
      this.setData({
        selected: data.index
      })
    }
  }

Appelez la méthode wx.switchTab fournie par WeChat pour terminer le saut d'URL et enregistrez la valeur d'index sélectionnée à ce moment-là.

Maintenant que nous avons écrit le code de notre composant, la page spécifique doit également configurer la logique correspondante pour le changement de bouton

4. Implémentation du code de page spécifique à l'onglet

// pages/my/my.js
/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("onShow")
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1
      })
    }
  },

Selected est défini via la fonction de cycle de vie de la page de la valeur onShow, parce que ma page est le deuxième onglet, donc la valeur d'index est définie sur 1. Le composant personnalisé WeChat a une nouvelle interface getTabBar, qui peut obtenir l'instance du composant tabBar personnalisé sous la page actuelle, puis définir la valeur sélectionnée dans le composant. La page d'accueil a également les mêmes paramètres et la valeur de l'index peut être sautée en fonction de la situation réelle.

L'effet final est présenté

Grâce à l'implémentation du code ci-dessus, l'intégralité de la barre de navigation inférieure personnalisée est réalisée. En fait, l'implémentation globale est relativement simple. Jetons un coup d'œil à l'effet

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!