Comment changer dynamiquement la barre d'onglets dans Uniapp

Uniapp est un framework de développement cross-end qui peut développer simultanément des applications pour plusieurs plates-formes telles que H5, des mini-programmes et des applications. Parmi eux, la barre de tabulation est l'un des contrôles importants utilisés comme barre de navigation inférieure pour afficher plusieurs pages. Au cours du processus de développement, il est parfois nécessaire de modifier dynamiquement la barre d'onglets en fonction des différents besoins de l'entreprise. Cet article explique comment modifier dynamiquement la barre d'onglets dans Uniapp.

1. Utilisation de base et structure de la barre de tabulations

Pour utiliser la barre de tabulations dans Uniapp, vous devez définir le style et le chemin de la page de la barre de navigation inférieure dans le fichier pages.json. L'exemple de code est le suivant :

"tabBar": {
    "color": "#999",
    "selectedColor": "#007AFF",
    "backgroundColor": "#ffffff",
    "borderStyle": "white",
    "list": [
        {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "static/tabbar/home.png",
            "selectedIconPath": "static/tabbar/home_selected.png"
        },
        {
            "pagePath": "pages/mine/mine",
            "text": "我的",
            "iconPath": "static/tabbar/mine.png",
            "selectedIconPath": "static/tabbar/mine_selected.png"
        }
    ]
}

Dans tabBar, vous pouvez définir la couleur, la couleur de sélection, la couleur d'arrière-plan, le style de bordure, etc. de la barre de navigation inférieure. Parmi eux, list est un tableau et chaque élément représente une page dans la barre de navigation inférieure. Dans chaque page, le chemin, le texte, l'icône et l'icône sélectionnée correspondants doivent être définis.

2. Comment modifier dynamiquement la barre de tabulations

Dans Uniapp, vous pouvez obtenir l'effet de modifier dynamiquement la barre de tabulations via les méthodes uni.setTabBarStyle et uni.setTabBarItem.

1. uni.setTabBarStyle

Utilisez la méthode uni.setTabBarStyle pour modifier dynamiquement le style de la barre de tabulation. Cette méthode peut modifier la couleur d'arrière-plan, le style de bordure, la couleur du texte, la taille des icônes, etc. de la barre d'onglets. C'est la méthode de base pour modifier dynamiquement le style de la barre d'onglets. L'exemple de code est le suivant :

uni.setTabBarStyle({
    color: '#999999',
    selectedColor: '#41b883',
    backgroundColor: '#ffffff',
    borderStyle: 'black'
});

Cet exemple de code modifie la couleur par défaut de la barre d'onglets en #999999, la couleur de l'état sélectionné en #41b883, la couleur d'arrière-plan en #ffffff et le style de bordure en bordure noire.

2. uni.setTabBarItem

Utilisez la méthode uni.setTabBarItem pour modifier dynamiquement le contenu de chaque page dans la barre d'onglets. Vous pouvez modifier le texte, les icônes, les chemins et d'autres informations sur la page. L'exemple de code est le suivant :

uni.setTabBarItem({
    index: 0,
    text: '首页',
    iconPath: '/static/tabbar/home.png',
    selectedIconPath: '/static/tabbar/home_selected.png'
});

Cet exemple de code modifie le texte de la première page en "Page d'accueil" et remplace l'icône et l'icône d'état sélectionnée par l'image correspondante.

3. Démo de modification dynamique de la barre de tabulations

Ci-dessous, nous utiliserons un exemple spécifique pour démontrer comment modifier dynamiquement la barre de tabulations.

Ajoutez une nouvelle page dans la section tabBar de pages.json, le code est le suivant :

"list": [
    {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home_selected.png"
    },
    {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/tabbar/mine.png",
        "selectedIconPath": "static/tabbar/mine_selected.png"
    },
    {
        "pagePath": "pages/add/add",
        "text": "添加",
        "iconPath": "static/tabbar/add.png",
        "selectedIconPath": "static/tabbar/add_selected.png"
    }
]

Ajoutez une nouvelle page "Ajouter" dans la barre de navigation inférieure.

Ajoutez un bouton dans add.vue Après avoir cliqué dessus, vous pouvez modifier le texte de la première page de la barre de navigation inférieure en un nombre aléatoire. Le code est le suivant :

<template>
    <view class="content">
        <view class="button" @click="changeTabBar">改变tabbar</view>
    </view>
</template>

<script>
    export default {
        methods: {
            changeTabBar() {
                const num = Math.floor(Math.random() * 100);
                
                uni.setTabBarItem({
                    index: 0,
                    text: `首页(${num})`
                });
            }
        }
    }
</script>

<style>
    .content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .button {
        width: 80vw;
        height: 10vw;
        line-height: 10vw;
        background-color: #41b883;
        color: #fff;
        text-align: center;
        border-radius: 4vw;
    }
</style>

Dans la méthode changeTabBar, générez un nombre aléatoire via Math.random() et utilisez la méthode uni.setTabBarItem pour modifier le texte de la première page pour qu'il contienne un nombre aléatoire.

Ajoutez un bouton dans index.vue et mine.vue Après avoir cliqué, vous pouvez modifier dynamiquement le style de la barre de navigation inférieure. Le code est le suivant :

<template>
    <view class="content">
        <view class="button" @click="changeTabBarStyle">改变tabbar样式</view>
    </view>
</template>

<script>
    export default {
        methods: {
            changeTabBarStyle() {
                uni.setTabBarStyle({
                    color: '#ff0000',
                    selectedColor: '#41b883',
                    backgroundColor: '#ffffff',
                    borderStyle: 'black'
                });
            }
        }
    }
</script>

<style>
    .content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .button {
        width: 80vw;
        height: 10vw;
        line-height: 10vw;
        background-color: #41b883;
        color: #fff;
        text-align: center;
        border-radius: 4vw;
    }
</style>

Dans la méthode changeTabBarStyle, modifiez dynamiquement le style de la barre de tabulation via la méthode uni.setTabBarStyle.

Enfin, lorsque nous cliquons sur les boutons respectifs, nous pouvons modifier dynamiquement le contenu et le style de la page dans la barre d'onglets.

4. Résumé

Cet article présente la méthode de modification dynamique de la barre d'onglets dans Uniapp. Au cours du processus de développement, le style et le contenu de la barre de navigation inférieure doivent être ajustés dynamiquement en fonction des différents besoins de l'entreprise. En utilisant les méthodes uni.setTabBarStyle et uni.setTabBarItem, vous pouvez facilement obtenir l'effet de modification dynamique de la barre de tabulation.

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!