更新记录

0.0.1（2026-05-02）

新增

• 新增自定义导航栏 zc-nav-bar，支持标题、返回区域和安全区适配。
• 新增页面容器 zc-page，统一处理页面背景、内容区域和底部安全区。
• 新增底部标签栏 zc-tabbar 和顶部标签页 zc-tabs。
• 新增吸顶容器 zc-sticky。
• 新增跨端弹层 zc-popup 和抽屉 zc-drawer。
• 新增通知栏 zc-notice-bar、骨架屏 zc-skeleton 和宫格布局 zc-grid。

优化

• 补充完整首页 demo，覆盖导航、安全区、Tabs、宫格、弹层、抽屉和骨架屏截图场景。
• 宫格组件改为 flex 布局，降低小程序和低版本 WebView 对 CSS Grid 的兼容风险。
• 补充详情页级 readme.md，完善组件 API、平台兼容性和权限说明。
• 完善插件市场发布配置、平台兼容性、授权价格和文档说明。

注意

• 当前定位为跨端导航、容器、安全区和弹层适配，不抢业务组件能力。
• 安全区、弹层遮罩、导航栏高度需要在 App 真机和小程序环境复测。

平台兼容性

uni-app(5.08)

uni-app x(5.08)

其他

多端 UI 组件库

zhuanz-crossui 面向 H5、小程序和 App 的页面结构组件，重点处理导航、安全区、弹层层级和布局适配。

适合需要快速搭建多端页面框架的 uni-app 项目，例如首页框架、业务列表页、个人中心、筛选页和设置页。插件定位是跨端页面结构与容器适配，不抢业务组件能力。

安装路径

将插件目录放入项目：

uni_modules/zhuanz-crossui

组件清单

• zc-nav-bar：自定义导航栏
• zc-tabbar：底部标签栏
• zc-tabs：顶部标签页
• zc-page：页面容器
• zc-sticky：吸顶容器
• zc-popup：跨端弹层
• zc-drawer：抽屉
• zc-notice-bar：通知栏
• zc-skeleton：骨架屏
• zc-grid：宫格布局

快速示例

<template>
  <zc-page>
    <zc-nav-bar title="首页" :show-back="false" />
    <zc-tabs :items="tabs" :current="current" @change="current = $event.index" />
    <zc-grid :items="items" />
    <zc-tabbar :items="tabbarItems" />
  </zc-page>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      tabs: [{ label: '首页' }, { label: '组件' }],
      items: [{ text: '导航', icon: 'N' }, { text: '弹层', icon: 'P' }],
      tabbarItems: [{ text: '首页', icon: 'H' }, { text: '我的', icon: 'M' }]
    }
  }
}
</script>

主要组件 API

zc-page

zc-nav-bar

zc-popup

zc-drawer

zc-tabs / zc-tabbar

zc-grid

平台兼容性

• uni-app Vue2 / Vue3：支持
• H5：支持
• App Vue：支持
• 微信小程序：支持
• 支付宝小程序：支持
• uni-app x：支持 Web 和 App，需按实际项目运行环境验证

权限说明

• 插件不采集任何数据。
• 插件不申请系统权限。
• 安全区高度来自 uni.getSystemInfoSync()，不同设备建议上架前真机验证。

注意事项

• 当前插件聚焦跨端导航、页面容器、安全区、弹层和布局。
• 弹层、抽屉、底部 Tabbar 涉及层级和安全区，建议在 App 真机和微信小程序复测。
• zc-grid 使用 flex 布局，优先保证 H5、小程序和 App WebView 的兼容性。