uniapp sets top navigation bar

In the process of mobile application development, the top navigation bar is a common interface element. It can help users quickly locate the current page and provide some commonly used operation buttons. In uniapp, setting the top navigation bar is very simple. This article will introduce you how to implement the top navigation bar in uniapp.

1. Create page

First, create a new page in the uniapp project directory. You can create a new page by adding a subdirectory under the pages directory. For example, we created a subdirectory named "demo" in the pages directory, and created a page named "index" in this subdirectory.

2. Set the style and layout of the page

In the newly created page, you need to set the style and layout of the page. You can define the style and layout of the page by adding style and template tags in the vue file of the page.

The style is as follows:

<style>
    .navbar {
        position: fixed;
        width: 100%;
        height: 44px;
        background-color: #f8f8f8;
        border-bottom: 1px solid #e7e7e7;
        top: 0;
        left: 0;
        z-index: 999;
    }

    .title {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        color: #333;
        line-height: 44px;
    }
</style>

The layout is as follows:

<template>
    <div>
        <div class="navbar">
            <div class="title">{{title}}</div>
        </div>
        <!-- 页面内容 -->
    </div>
</template>

In the above code, we set a fixed position navigation bar with a height of 44px and a light background color. Gray with a thin line at the bottom. The title of the page is displayed in the center of the navigation bar. The page content is placed below the navigation bar and can be set by adding content.

3. Add the data and methods of the page

In the vue file, you can add attributes such as data, methods, computed, etc. to define the data and methods of the page. For example, the following is a simple example that defines a variable title to represent the title of the page.

<script>
    export default {
        data() {
            return {
                title: '设置顶部导航栏'
            }
        }
    }
</script>

In the above code, we use the special syntax data() of uniapp to define a variable named title, whose initial value is "Set the top navigation bar".

4. Run the page

Finally, in the project root directory, run the command "npm run dev" in the terminal to run the page. Open http://localhost:8080/demo/index.html in the browser and you can see the page you just created. If everything goes well, the page will display a fixed-position top navigation bar, along with the page content.

It is very convenient to set up the top navigation bar in uniapp, and it only takes a few simple steps to complete. By defining styles and layouts, adding data and methods, you can implement a powerful top navigation bar to provide a good user experience for mobile app users.

The above is the detailed content of uniapp sets top navigation bar. For more information, please follow other related articles on the PHP Chinese website!