手把手教你寫一個uniapp通用頁面組件

更新時間：2022年12月15日 16:05:11 作者：我的代碼果然有問題

uniapp中每個頁面可以理解為一個單頁面組件,下面這篇文章主要給大家介紹了關(guān)于如何寫一個uniapp通用頁面組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

做移動端項目時為了兼容各種手機型號的界面，最好有一個統(tǒng)一的頁面組件對樣式做統(tǒng)一處理，例如：判斷是否顯示狀態(tài)欄，是否顯示頭部導航，是否空出底部區(qū)域等等，本篇會帶大家從零到一開發(fā)一個 uniapp 的通用頁面組件

需求

本次開發(fā)的頁面，組件，需要完成以下功能

可配置控制是否顯示原生導航，顯示狀態(tài)欄，并且也可以控制狀態(tài)欄顏色
可配置控制是否留出底部固定區(qū)域

開發(fā)

初始化頁面數(shù)據(jù)

編寫頁面組件類，獲取系統(tǒng)配置，初始化樣式數(shù)據(jù)

class Page {
  constructor() {
    this.system = uni.getSystemInfoSync()
?
    this.init()
  }
  
  init = () => {
    console.log(this.system);
  }
}
?
export default Page

頁面組件基本結(jié)構(gòu)

<template>
  <view class="sf-page" :class="theme">
    <!-- 頁面頭部 -->
    <template v-if="customHeader">
      <view class="sf-page-header">
        <!-- 頭部核心 -->
        <slot name="header"></slot>
      </view>
    </template>
    <!-- 頁面主體 -->
    <view class="sf-page-body">
      <slot name="body"></slot>
    </view>
    <!-- 頁面底部 -->
    <template v-if="customFooter">
      <view class="sf-page-footer">
        <slot name="footer"></slot>
      </view>
    </template>
  </view>
</template>
?
<script setup>
  import {
    computed, toRefs
  } from "vue"
  import Page from './class/page.js'
?
  const props = defineProps({
    customHeader: {
      type: Boolean,
      default: false
    },
    customFooter: {
      type: Boolean,
      default: false
    },
  })
?
  const page = new Page()
?
  const theme = computed(() => {
    return uni.$theme.get()
  })
</script>
?
<style>
  .sf-page {
    min-height: 100vh;
    width: 100%;
  }
  .sf-page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    z-index: 99;
  }
  .sf-page-body {
?
  }
  .sf-page-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    z-index: 99;
  }
</style>

實現(xiàn)狀態(tài)欄與底部配置

通過系統(tǒng)api，獲取系統(tǒng)狀態(tài)欄高度

import { ref } from 'vue'
?
class Page {
  constructor() {
    this.system = uni.getSystemInfoSync()
    this.statusBarHeight = 0
    this.headerHeight = 45
    this.footerHeight = 45
    
    this.init()
  }
  
  init = () => {
    this.statusBarHeight = this.system.statusBarHeight
  }
}
?
export default Page

頁面組件配置

<template>
  <view class="sf-page" :class="theme">
    <!-- 頁面頭部 -->
    <template v-if="customHeader">
      <view class="sf-page-header">
        <!-- 沉浸式狀態(tài)欄 -->
        <view :style="{ height: statusBarHeight + 'px', background: statusBarBG }"></view>
        <!-- 頭部核心 -->
        <view :style="{ height: headerHeight + 'px' }">
          <slot name="header"></slot>
        </view>
      </view>
      <!-- 占位 -->
      <view :style="{ height: statusBarHeight + headerHeight + 'px' }"></view>
    </template>
    <!-- 頁面主體 -->
    <view class="sf-page-body">
      <slot name="body"></slot>
    </view>
    <!-- 頁面底部 -->
    <template v-if="customFooter">
      <view class="sf-page-footer">
        <slot name="footer"></slot>
      </view>
    </template>
  </view>
</template>
?
<script setup>
  import {
    computed, toRefs
  } from "vue"
  import Page from './class/page.js'
?
  const props = defineProps({
    customHeader: {
      type: Boolean,
      default: false
    },
    customFooter: {
      type: Boolean,
      default: false
    },
    statusBarBG: {
      type: String,
      default: 'none'
    }
  })
?
  const page = new Page()
  const { headerHeight, statusBarHeight, footerHeight } = toRefs(page)
?
  const theme = computed(() => {
    return uni.$theme.get()
  })
  
</script>

頁面組件實例化Page 對象，這里注意解構(gòu)高度屬性時，需要使用toRefs 實現(xiàn)響應式，這樣，即可通過 customHeader,customFooter 控制相應區(qū)域是否顯示，并且根據(jù)設(shè)置的 height 來控制對應區(qū)域的高度，也可通過 statusBarBG 控制狀態(tài)欄的顏色

  <sf-page :customHeader="true" :customFooter="false" statusBarBG="#333333">
  </sf-page>

頁面使用

  <sf-page :customHeader="true" :customFooter="true" statusBarBG="#333333">
    <template v-slot:header>
      <view class="">
        // ... 導航
      </view>
    </template>
    <template v-slot:body>
      <view class="main">
        // ... 內(nèi)容
      </view>
    </template>
    <template v-slot:footer>
      <view class="">
        // ... 底部操作
      </view>
    </template>
  </sf-page>

這樣，就可以根據(jù)設(shè)計稿的需要，動態(tài)的控制是否顯示頭部導航或底部操作區(qū)域啦