So ändern Sie die Tableiste in Uniapp dynamisch

Uniapp ist ein Cross-End-Entwicklungsframework, das Anwendungen für mehrere Plattformen wie H5, Miniprogramme und Apps gleichzeitig entwickeln kann. Es ist ein sehr praktisches Entwicklungstool. Unter diesen ist die Tableiste eines der wichtigen Steuerelemente, die als untere Navigationsleiste zum Anzeigen mehrerer Seiten verwendet wird. Während des Entwicklungsprozesses ist es manchmal erforderlich, die Registerkartenleiste je nach Geschäftsanforderungen dynamisch zu ändern. In diesem Artikel wird erläutert, wie die Registerkartenleiste in Uniapp dynamisch geändert wird.

1. Grundlegende Verwendung und Struktur der Tabbar

Um die Tabbar in Uniapp zu verwenden, müssen Sie den Stil und den Seitenpfad der unteren Navigationsleiste in der Datei „pages.json“ festlegen . Der Beispielcode lautet wie folgt:

"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"
        }
    ]
}

In tabBar können Sie die Farbe, Auswahlfarbe, Hintergrundfarbe, Rahmenstil usw. der unteren Navigationsleiste festlegen. Unter diesen ist die Liste ein Array und jedes Element stellt eine Seite in der unteren Navigationsleiste dar. Auf jeder Seite müssen der entsprechende Pfad, Text, Symbol und ausgewählte Symbol festgelegt werden.

2. So ändern Sie die Tabbar dynamisch

In Uniapp können Sie den Effekt einer dynamischen Modifizierung der Tabbar über die Methoden uni.setTabBarStyle und uni.setTabBarItem erzielen.

1. uni.setTabBarStyle

Verwenden Sie die uni.setTabBarStyle-Methode, um den Tabbar-Stil dynamisch zu ändern. Mit dieser Methode können Sie die Hintergrundfarbe, den Rahmenstil, die Textfarbe, die Symbolgröße usw. der Tableiste ändern. Dies ist die grundlegende Methode zum dynamischen Ändern des Tableistenstils. Der Beispielcode lautet wie folgt:

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

Dieser Beispielcode ändert die Standardfarbe der Tableiste in #999999, die Farbe des ausgewählten Status in #41b883, die Hintergrundfarbe in #ffffff und den Rahmen Stil zu einem schwarzen Rand.

2. uni.setTabBarItem

Verwenden Sie die uni.setTabBarItem-Methode, um den Inhalt jeder Seite in der Tableiste dynamisch zu ändern. Sie können den Text, die Symbole, Pfade und andere Informationen auf der Seite ändern. Der Beispielcode lautet wie folgt:

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

Dieser Beispielcode ändert den Text der ersten Seite in „Startseite“ und ändert das Symbol und das ausgewählte Statussymbol in das entsprechende Bild.

3. Demo zur dynamischen Änderung der Tableiste

Im Folgenden zeigen wir anhand eines konkreten Beispiels, wie die Tableiste dynamisch geändert wird.

Fügen Sie eine neue Seite zum TabBar-Abschnitt in page.json hinzu. Der Code lautet wie folgt:

"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"
    }
]

Fügen Sie eine neue Seite hinzu. Klicken Sie auf „Hinzufügen“ zur unteren Navigationsleiste.

Fügen Sie eine Schaltfläche in add.vue hinzu. Klicken Sie darauf, um den Text der ersten Seite in der unteren Navigationsleiste in eine zufällige Zahl zu ändern. Der Code lautet wie folgt:

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

Generieren Sie in der changeTabBar-Methode eine Zufallszahl über Math.random() und verwenden Sie die uni.setTabBarItem-Methode, um den Text der ersten Seite mit a in den Inhalt zu ändern Zufallszahl.

Fügen Sie eine Schaltfläche in index.vue und mine.vue hinzu. Nach dem Klicken können Sie den Stil der unteren Navigationsleiste dynamisch ändern. Der Code lautet wie folgt:

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

In der Methode „changeTabBarStyle“ wird der Tabbar-Stil dynamisch über die Methode „uni.setTabBarStyle“ geändert.

Wenn wir schließlich auf die entsprechenden Schaltflächen klicken, können wir den Inhalt und Stil der Seite in der Tableiste dynamisch ändern.

4. Zusammenfassung

In diesem Artikel wird die Methode zum dynamischen Ändern der Tableiste in Uniapp vorgestellt. Während des Entwicklungsprozesses müssen Stil und Inhalt der unteren Navigationsleiste dynamisch an unterschiedliche Geschäftsanforderungen angepasst werden. Durch die Verwendung der Methoden uni.setTabBarStyle und uni.setTabBarItem können Sie auf einfache Weise den Effekt einer dynamischen Änderung der Tableiste erzielen.

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Tableiste in Uniapp dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!