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

管理

編輯

刪除

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

其他

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

1.進入 pages.json 文件

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

2.修改 navigationStyle 配置項

在 pages.json 文件中，可以為每一個頁面單獨設置導航欄樣式，具體的配置項是 navigationStyle。該配置項可以取值為 default、custom 或 none，其中：

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

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

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

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

在 index.vue 文件中，可以通過添加自定義頭部組件來實現(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: '首頁', // 頭部標題
        message: 'Hello, World!' // 頁面內(nèi)容
      }
    }
  }
</script>

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

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

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

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