手把手教你写一个uniapp通用页面组件

更新时间：2022年12月15日 16:05:11 作者：我的代码果然有问题

uniapp中每个页面可以理解为一个单页面组件,下面这篇文章主要给大家介绍了关于如何写一个uniapp通用页面组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

做移动端项目时为了兼容各种手机型号的界面，最好有一个统一的页面组件对样式做统一处理，例如：判断是否显示状态栏，是否显示头部导航，是否空出底部区域等等，本篇会带大家从零到一开发一个 uniapp 的通用页面组件

需求

本次开发的页面，组件，需要完成以下功能

可配置控制是否显示原生导航，显示状态栏，并且也可以控制状态栏颜色
可配置控制是否留出底部固定区域

开发

初始化页面数据

编写页面组件类，获取系统配置，初始化样式数据

class Page {
  constructor() {
    this.system = uni.getSystemInfoSync()

    this.init()
  }
  
  init = () => {
    console.log(this.system);
  }
}

export default Page

页面组件基本结构

<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>

实现状态栏与底部配置

通过系统api，获取系统状态栏高度

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">
        <!-- 沉浸式状态栏 -->
        <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 对象，这里注意解构高度属性时，需要使用toRefs 实现响应式，这样，即可通过 customHeader,customFooter 控制相应区域是否显示，并且根据设置的 height 来控制对应区域的高度，也可通过 statusBarBG 控制状态栏的颜色

  <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">
        // ... 内容
      </view>
    </template>
    <template v-slot:footer>
      <view class="">
        // ... 底部操作
      </view>
    </template>
  </sf-page>

这样，就可以根据设计稿的需要，动态的控制是否显示头部导航或底部操作区域啦

总结

到此这篇写一个uniapp通用页面组件的文章就介绍到这了,更多相关uniapp通用页面组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Javascript 键盘keyCode键码值表
Javascript 键盘keyCode键码值表，需要的朋友可以保存一份。
2009-12-12
详解Webpack loader 之 file-loader
这篇文章主要介绍了详解Webpack loader 之 file-loader，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
javascript:文字不间断向左移动的实例代码
这篇文章介绍了javascript:文字不间断向左移动的实例代码，有需要的朋友可以参考一下
2013-08-08
Dron右键菜单 v1.0
Dron右键菜单 v1.0...
2006-10-10
TypeScript使用vscode监视代码编译的过程
这篇文章主要介绍了TypeScript使用vscode监视代码编译,使用tsc 文件名称可以将ts文件转化为js文件，js文件可以引入在html文件中直接使用，需要的朋友可以参考下
2021-12-12
详细分析JavaScript中的深浅拷贝
这篇文章主要介绍了JavaScript中的深浅拷贝，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
2020-09-09
原生JavaScript实现页面滚动监听的方法步骤
滚动监听事件一般网页中的返回顶部按钮都是通过滚动监听事件来实现的,本文给大家介绍了原生JavaScript实现页面滚动监听的方法步骤,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2025-03-03
基于KO+BootStrap+MVC实现的分页控件代码分享
本段js和html两段代码实现分页控件效果，下面通过本文给大家详细介绍下基于KO+BootStrap+MVC实现的分页控件，非常不错，感兴趣的朋友一起看看吧
2016-11-11
原生js封装的ajax方法示例
这篇文章主要介绍了原生js封装的ajax方法,结合实例形式分析了JavaScript封装ajax操作及调用方法相关操作技巧,非常简单实用,需要的朋友可以参考下
2018-08-08
momentjs使用详细说明
这篇文章主要介绍了momentjs详细使用说明,使用 Moment.js 可以轻松地获取上周、上月和前三个月的起始和结束时间，在示例中，我们传入了 '2023-07-15'，并将返回的日期信息存储在 dateInfo 变量中，然后将其打印到控制台上，需要的朋友可以参考下
2023-07-07