Introduction détaillée à la méthode de personnalisation du style de la barre d'onglets dans Uniapp

uniapp est un framework de développement multiplateforme qui permet aux développeurs de créer rapidement des applications pour plusieurs plates-formes à l'aide de la syntaxe vue. Parmi eux, le composant de barre d'onglets fourni avec uniapp peut facilement implémenter la fonction de la barre de navigation inférieure, mais le style par défaut peut ne pas répondre à nos besoins, nous devons donc personnaliser le style de la barre d'onglets. Ci-dessous, je présenterai en détail comment Uniapp personnalise le style de la barre d'onglets.

1. Créer un composant tabBar.vue

Créer un composant nommé tabBar dans le répertoire des composants du projet uniapp, qui sert de tabbar Basic composants, y compris la disposition générale et les effets de commutation de la barre d'onglets.

Le code du modèle du composant tabBar.vue est le suivant :

<template>
  <view>
    <view>
      <view>
        <img  alt="Introduction détaillée à la méthode de personnalisation du style de la barre d'onglets dans Uniapp" >
      </view>
      <view>{{ item.text }}</view>
    </view>
  </view>
</template>

2. Introduction du composant tabBar dans la page d'accueil Home.vue
#🎜 🎜##🎜🎜 #Introduisez le composant barre d'onglets dans la page d'accueil et liez les données de la liste de la barre d'onglets à la page d'accueil. Les données de liste de la barre d'onglets sont un tableau qui contient chaque onglet et son icône, son texte et d'autres informations correspondants.

Le code du modèle Home.vue est le suivant :

<template>
  <view>
    <view>
      <router-view></router-view>
    </view>
    <tabbar></tabbar>
  </view>
</template>

<script>
import tabBar from "@/components/tabBar"

export default {
  name: "Home",
  components: { tabBar },
  data() {
    return {
      activeIndex: 0,
      list: [
        {
          iconPath: "/static/tab_home.png",
          selectedIconPath: "/static/tab_home_active.png",
          text: "首页",
        },
        {
          iconPath: "/static/tab_message.png",
          selectedIconPath: "/static/tab_message_active.png",
          text: "消息",
        },
        {
          iconPath: "/static/tab_mine.png",
          selectedIconPath: "/static/tab_mine_active.png",
          text: "我的",
        },
      ],
    };
  },
  methods: {
    onTabBarChange(index) {
      this.activeIndex = index;
    },
  },
};
</script>

Style de barre d'onglets personnalisé

3. Style de barre d'onglets personnalisé requis dans App.vue, car la barre d'onglets est partagée par l'ensemble de l'application, nous devons donc définir le style dans App.vue. Ici, je vais personnaliser trois effets de style.

Style 1 : Modifier la taille et la position de l'icône

<style>
.uni-tabbar-item-icon {
  position: relative;
  top: -3px; //图标向上偏移
  img {
    width: 24px; //图标宽度
    height: 24px; //图标高度
  }
}
</style>

Style 2 : Modifier la taille et la couleur du texte

<style>
.uni-tabbar-item-text {
  font-size: 12px; //文字大小
  color: #999; //文字颜色
}
.uni-tabbar-item-active .uni-tabbar-item-text {
  color: #007aff; //选中状态下文字颜色
}
</style>

Style 3 : Ajouter couleur d'arrière-plan et ombre

<style>
.uni-tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 55px; //tabbar高度
  background-color: #fff; //背景色
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1); //阴影
  z-index: 100;
}
</style>

Effet final

4. Grâce aux étapes ci-dessus de personnalisation du style de la barre d'onglets, nous avons réussi à implémenter un style personnalisé pour la barre d'onglets configuration du composant. L'effet est le suivant :

Summary

Grâce à la syntaxe vue et au composant tabbar fourni par le framework uniapp, nous pouvons implémentez rapidement la fonction de colonne de navigation inférieure. Dans le même temps, en personnalisant le style de la barre d'onglets, nous pouvons faire en sorte que la barre d'onglets réponde à nos besoins et améliore l'expérience utilisateur de l'application.

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!