How to modify the title bar in uniapp

With the rapid development of mobile Internet, more and more applications are being presented through Apps. For App design and development, the UI interface is often the most important link. Among them, the title bar displayed on mobile devices has also become something that designers and developers need to pay attention to.

In Uniapp, the method of modifying the title bar has also become the focus of many developers. This article will introduce in detail how to modify the title bar in Uniapp to help developers better design mobile applications that meet their own needs.

1. Modify the global title bar style

In Uniapp, you can modify the global title bar style by modifying the global style. We can modify the uni.css file in App.vue, or we can introduce a separate style file into the page to modify it. At the same time, we can also modify global variables to set the title bar. Here, we take modifying the uni.css file as an example to introduce. The specific steps are as follows:

1) First, find the uni.css file in the root directory of the project and open the file.

2) Find the style class that needs to be modified and modify it. Generally speaking, the title bar style class is: .uni-page-head, and the title bar is modified by modifying the css style under this class.

Sample code:

.uni-page-head {
  height: 44px; //标题栏高度
  background-color: #fff; //标题栏背景色
  color: #000; //标题栏文字颜色
  font-size: 16px; //标题栏文字字号
  border-bottom: 1px solid #e5e5e5; //标题栏底部边框
}

Through the above code example, we can see that we can modify the height, background color, text color, font size, bottom border and other style attributes of the title bar here.

3) After the modification is completed, save the uni.css file, recompile it in the application, and check the effect.

2. Modify the page title bar style

If you need to modify the style of the title bar of a certain page, you can do so by modifying the style of the page. The specific steps are as follows:

1) In the page that needs to be modified, introduce the style file, or write the style directly. The sample code is as follows:

<style lang="scss">
.uni-page-head {
  height: 50px;
  background: #f5f5f5;
  border-bottom: none;
  .uni-page-head-title {
    color: #000;
    font-size: 18px;
  }
  .uni-icon {
    font-size: 24px;
    color: #000;
  }
}
</style>

In the sample code, we first define the .uni-page-head class, set the title bar to a height of 50px, a background color of #f5f5f5, and a bottom border of none. Next, we defined styles for the .uni-page-head-title and .uni-icon classes, which respectively controlled the color and font size of the title text and the color and font size of the returned icon.

2) After the modification is completed, recompile the file to see the effect.

3. Dynamic modification of title bar content

In some cases, we need to dynamically modify the content of the title bar to better adapt to the needs of different scenarios. The specific implementation method is as follows:

1) Dynamic modification of the title is achieved by setting the title of the title bar. An example is as follows:

<template>
  <view>
    <view class="uni-page-head">
      <text class="uni-page-head-title">{{title}}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '默认标题'
    }
  },
  onShow() {
    this.title = '新的标题';
  }
}
</script>

In the code snippet, we first define a Uniapp page and achieve dynamic modification of the title by setting the title of the title bar. In data, we first define a default title as "Default Title". Next, in the onShow function, we set the title to "new title" and reference it in the page. In this way, the title of the page title bar will also change as the content changes.

2) Dynamically modify the content of the title bar by setting the area on the right side of the navigation bar. The sample code is as follows:

<template>
  <view>
    <view class="uni-page-head">
      <text class="uni-page-head-title">{{title}}</text>
      <view class="uni-page-head-right" @click="onRightClick">
        <text class="uni-icon uni-icon-add"></text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '默认标题'
    }
  },
  methods: {
    onRightClick() {
      // 点击右侧按钮时触发的操作
    }
  },
  onShow() {
    this.title = '新的标题';
  }
}
</script>

<style lang="scss">
.uni-page-head {
  height: 44px;
  background-color: #fff;
  color: #000;

  .uni-page-head-title {
    position: absolute;
    left: 50%;
    margin-left: -60px;
    text-align: center;
  }

  .uni-page-head-right {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 20px;
  }
}
</style>

In the code snippet, we use the text label as the button on the right side of the navigation bar. And in the method, the operation that is triggered when the button on the right is clicked is defined. Similarly, in the onShow function, we set the title to "new title" and reference it in the page. In this way, the content of the page title bar will also change as the content changes.

Through the introduction of this article, we learned how to modify the title bar in Uniapp, and realized the modification of the title bar style and dynamically modified the title and content to adapt to the needs of different scenarios. As mobile applications continue to develop and be updated, we believe that these techniques and methods will continue to be optimized and upgraded to meet the needs of an increasingly wide range of users.

The above is the detailed content of How to modify the title bar in uniapp. For more information, please follow other related articles on the PHP Chinese website!