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

目录

• 前言
• 需求
• 开发
• 初始化页面数据
• 实现状态栏与底部配置
• 页面使用
• 总结

前言

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

需求

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

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

开发

初始化页面数据

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

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

• 页面组件基本结构

​

​

实现状态栏与底部配置

• 通过系统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

• 页面组件配置

​

页面组件实例化Page 对象，这里注意解构高度属性时，需要使用toRefs 实现响应式， 这样，即可通过 customHeader,customFooter 控制相应区域是否显示，并且根据设置的 height 来控制对应区域的高度， 也可通过 statusBarBG 控制状态栏的颜色

页面使用

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

总结

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