從零開始學(xué)UniApp微信小程序開發(fā)：頭部適配技巧讓你事半功倍！

管理

編輯

刪除

CRMEB-慕白寒窗雪 2023-12-08 10:10:44

其他

在 UniApp 中，在微信小程序開發(fā)中，頭部適配可以通過修改 pages.json 中的 navigationStyle 配置項(xiàng)來實(shí)現(xiàn)，具體操作步驟如下：

1.進(jìn)入 pages.json 文件

在 UniApp 項(xiàng)目的根目錄中找到 pages.json 文件，打開該文件。

2.修改 navigationStyle 配置項(xiàng)

在 pages.json 文件中，可以為每一個(gè)頁面單獨(dú)設(shè)置導(dǎo)航欄樣式，具體的配置項(xiàng)是 navigationStyle。該配置項(xiàng)可以取值為 default、custom 或 none，其中：

default 表示使用小程序默認(rèn)導(dǎo)航欄（即右側(cè)有一個(gè)返回圖標(biāo)的導(dǎo)航欄）。
custom 表示隱藏小程序默認(rèn)導(dǎo)航欄，自定義頭部，可以通過 CSS 樣式來設(shè)置頭部的樣式。
none 表示不顯示導(dǎo)航欄，頁面將充滿整個(gè)屏幕。

例如，如果需要自定義頭部樣式，可以在 pages.json 文件中為某個(gè)頁面設(shè)置 navigationStyle: "custom" 配置項(xiàng)，示例代碼如下：

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

3.在 index.vue 中實(shí)現(xiàn)頭部自定義

在 index.vue 文件中，可以通過添加自定義頭部組件來實(shí)現(xiàn)頭部的自定義。具體操作步驟如下：

(1). 在 index.vue 文件中，添加頭部組件代碼，示例代碼如下：

<!-- 頭部組件 -->
<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). 在 index.vue 文件中使用頭部組件，并傳入?yún)?shù) title，示例代碼如下：

<!-- 使用頭部組件 -->
<template>
  <view>
    <!-- 頭部組件，通過 v-bind 動態(tài)綁定 title 參數(shù) -->
    <custom-header :title="title"></custom-header>

    <!-- 頁面內(nèi)容 -->
    <view class="content">
      <text>{{ message }}</text>
    </view>
  </view>
</template>

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

  export default {
    components: {
      customHeader
    },
    data() {
      return {
        title: '首頁', // 頭部標(biāo)題
        message: 'Hello, World!' // 頁面內(nèi)容
      }
    }
  }
</script>

<style scoped>
  /* 頁面內(nèi)容樣式 */
  .content {
    padding-top: 44px; /* 頭部高度 */
    background-color: #ffffff;
    height: 100%;
  }
</style>

在 index.vue 文件中，通過添加自定義頭部組件和設(shè)置 padding-top 來實(shí)現(xiàn)頭部自定義的適配。其中，padding-top: 44px 表示設(shè)置頁面內(nèi)容的頂部距離為頭部的高度，確保內(nèi)容不會被頭部遮擋。

CRMEB v5 全開源電商系統(tǒng)，開發(fā)者首選

基于ThinkPhp6.0+uniapp 開發(fā)的客戶管理加電商營銷的新零售商城系統(tǒng)。能夠真正幫助企業(yè)基于微信公眾號H5、小程序、wap、pc、APP等，實(shí)現(xiàn)會員管理、數(shù)據(jù)分析,精準(zhǔn)營銷的電子商務(wù)管理系統(tǒng)?？蓾M足企業(yè)新零售、批發(fā)、分銷、預(yù)約、O2O、多店等各種業(yè)務(wù)需求。CRMEB的優(yōu)勢:快速積累客戶、會員數(shù)據(jù)分析、智能轉(zhuǎn)化客戶、有效提高銷售、會員維護(hù)；