更新记录

1.0.2（2026-01-19） 下载此版本

更新下部占用问题

1.0.1（2026-01-19） 下载此版本

修复下部tabbar占用，造成的页面滚动

1.0.0（2026-01-19） 下载此版本

无

平台兼容性

uni-app(4.44)

rl520-container

介绍

rl520-container 是一个智能页面容器组件，专为 UniApp 开发设计，提供自动化的页面布局适配功能。

功能特性

• 智能高度计算: 自动计算页面可用高度
• 状态栏适配: 支持不同设备状态栏高度
• 导航栏支持: 兼容自定义导航栏高度
• 底部安全区: 适配 iOS 刘海屏底部安全区域
• TabBar 适配: 自动处理底部 TabBar 高度
• 跨平台兼容: 支持各主流小程序平台

安装使用

引入组件

<template>
  <rl520-container :has-navbar="true" :has-tabbar="true">
    <!-- 页面内容 -->
  </rl520-container>
</template>

<script>
import rl520Container from '@/uni_modules/rl520-container/components/rl520-container/rl520-container.vue'

export default {
  components: {
    rl520Container
  }
}
</script>

属性说明

样式类

• .smart-container: 主容器样式
• .content-area: 内容区域样式

注意事项

• 平台差异: iOS 和 Android 设备的适配存在差异
• 刘海屏支持: 组件自动检测并适配刘海屏设备底部安全区域
• 生命周期: 组件在 mounted 钩子中初始化系统信息
• 性能优化: 避免在页面中重复计算系统信息

版本更新

• v1.0.0: 初始版本发布，包含基本的页面容器功能和设备适配能力
• 功能增强: 持续优化设备适配能力和跨平台兼容性

常见问题

• 微信小程序警告: 组件内部已处理 getSystemInfoSync 的废弃警告
• 底部安全区: iOS 刘海屏设备自动适配底部安全区域
• 高度计算: 组件会根据 hasNavbar 和 hasTabbar 属性动态计算内容高度