How to dynamically change tabbar in Uniapp

Uniapp is a cross-end development framework that can develop applications for multiple platforms such as H5, mini programs, and apps at the same time. It is a very practical development tool. Among them, tabbar is one of the important controls used as the bottom navigation bar to display multiple pages. During the development process, sometimes it is necessary to dynamically change the tabbar according to different business needs. This article will introduce how to dynamically change the tabbar in Uniapp.

1. Basic use and structure of tabbar

To use tabbar in Uniapp, you need to set the style and page path of the bottom navigation bar in the pages.json file. The sample code is as follows:

"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, you can set the color, selection color, background color, border style, etc. of the bottom navigation bar. Among them, list is an array, and each element represents a page in the bottom navigation bar. In each page, the corresponding path, text, icon and selected icon need to be set.

2. Methods of dynamically modifying the tabbar

In Uniapp, the effect of dynamically modifying the tabbar can be achieved through the uni.setTabBarStyle and uni.setTabBarItem methods.

1. uni.setTabBarStyle

Use the uni.setTabBarStyle method to dynamically modify the tabbar style. This method can modify the background color, border style, text color, icon size, etc. of the tabbar. It is the basic method for dynamically modifying the tabbar style. The sample code is as follows:

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

This sample code changes the default color of the tabbar to #999999, the color of the selected state to #41b883, the background color to #ffffff, and the border style to a black border.

2. uni.setTabBarItem

Use the uni.setTabBarItem method to dynamically modify the content of each page in the tabbar. You can modify the text, icons, paths and other information on the page. The sample code is as follows:

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

This sample code changes the text of the first page to "Home Page", and changes the icon and selected status icon to the corresponding picture.

3. Demo for dynamically modifying the tabbar

Below, we will use a specific example to demonstrate how to dynamically modify the tabbar.

Add a new page in the tabBar section of pages.json, the code is as follows:

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

Add a new page "Add" in the bottom navigation bar.

Add a button in add.vue. After clicking it, you can change the text of the first page of the bottom navigation bar to a random number. The code is as follows:

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

In the changeTabBar method, generate a random number through Math.random(), and use the uni.setTabBarItem method to modify the text of the first page to content with a random number.

Add a button to index.vue and mine.vue. After clicking, you can dynamically modify the style of the bottom navigation bar. The code is as follows:

<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 the changeTabBarStyle method, dynamically modify the tabbar style through the uni.setTabBarStyle method.

Finally, when we click the respective buttons, we can dynamically modify the content and style of the page in the tabbar.

4. Summary

This article introduces the method of dynamically modifying the tabbar in Uniapp. During the development process, the style and content of the bottom navigation bar need to be dynamically adjusted according to different business needs. By using the uni.setTabBarStyle and uni.setTabBarItem methods, you can easily achieve the effect of dynamically modifying the tabbar.

The above is the detailed content of How to dynamically change tabbar in Uniapp. For more information, please follow other related articles on the PHP Chinese website!