uniapp develops WeChat applet header adaptation

In UniApp, in the development of WeChat applets, header adaptation can pages.jsonbe navigationStylerealized by modifying the configuration items in , the specific operation steps are as follows:

1. access pages.jsonfile

Find pages.jsonthe file and open it.

2. Modify navigationStyleconfiguration items

In pages.jsonthe file , the navigation bar style can be set individually for each page, the specific configuration item is navigationStyle. This configuration item can take a value of default, customor none, where:

• defaultIndicates to use the default navigation bar of the applet (that is, the navigation bar with a return icon on the right).
• customIndicates to hide the default navigation bar of the applet, customize the header, and set the style of the header through CSS styles.
• noneIndicates that the navigation bar will not be displayed, and the page will fill the entire screen.

For example, if you need to customize the header style, you pages.jsoncan set navigationStyle: "custom"configuration items for a page in the file, the sample code is as follows:

{
    
    
  "pages": [
    {
    
    
      "path": "pages/index/index",
      "style": {
    
    
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#ffffff"
      },
      "navigationStyle": "custom"
    }
  ]
}

3. index.vueImplement header customization in

In index.vuethe file , you can customize the header by adding a custom header component. The specific operation steps are as follows:

1. In index.vuethe file , add the header component code, the sample code is as follows:

<!-- 头部组件 -->
<template>
  <view class="custom-header">
    <view class="custom-header-back" @click="onBackClick">
      <image src="/static/images/back.png" class="custom-header-back-image" />
    </view>
    <view class="custom-header-title">{
   
   { title }}</view>
  </view>
</template>

<script>
  export default {
      
      
    props: {
      
      
      title: {
      
      
        type: String,
        default: ''
      }
    },
    methods: {
      
      
      onBackClick() {
      
      
        uni.navigateBack()
      }
    }
  }
</script>

<style scoped>
  /* 头部样式 */
  .custom-header {
      
      
    display: flex;
    height: 44px;
    background-color: #ffffff;
    border-bottom: 1px solid #eaeaea;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
  }

  .custom-header-back {
      
      
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .custom-header-back-image {
      
      
    width: 18px;
    height: 18px;
  }

  .custom-header-title {
      
      
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    color: #333333;
  }
</style>

2. Use the header component in index.vuethe file and pass in parameters title. The sample code is as follows:

<!-- 使用头部组件 -->
<template>
  <view>
    <!-- 头部组件，通过 v-bind 动态绑定 title 参数 -->
    <custom-header :title="title"></custom-header>

    <!-- 页面内容 -->
    <view class="content">
      <text>{
   
   { message }}</text>
    </view>
  </view>
</template>

<script>
  import customHeader from '../../components/custom-header.vue'

  export default {
      
      
    components: {
      
      
      customHeader
    },
    data() {
      
      
      return {
      
      
        title: '首页', // 头部标题
        message: 'Hello, World!' // 页面内容
      }
    }
  }
</script>

<style scoped>
  /* 页面内容样式 */
  .content {
      
      
    padding-top: 44px; /* 头部高度 */
    background-color: #ffffff;
    height: 100%;
  }
</style>

In index.vuethe file , customize the header by adding a custom header component and setting padding-top. Among them, padding-top: 44pxit means to set the top distance of the page content to the height of the head to ensure that the content will not be blocked by the head.