更新记录

1.1.0（2026-06-09） 下载此版本

更新日志

v1.1.0

跨平台适配

• 统一屏幕度量：优先 uni.getWindowInfo()，回退 getSystemInfoSync()
• 适配 iOS / Android 安全区（safeAreaInsets），工具栏避开刘海与 Home 指示条
• H5 监听 resize、orientationchange；小程序 / App 监听 uni.onWindowResize
• 页面 activated 时自动刷新布局与时间（App 从后台恢复）
• 秒级定时器对齐整秒，减少各端跳动
• 全屏模式数字始终按屏幕像素自适应，不再受嵌入模式 digitSize（rpx）影响
• 增加 -webkit-backdrop-filter 前缀，提升 iOS 毛玻璃兼容性

布局与定位

• 新增嵌入模式（:fullscreen="false"），可放入任意页面
• 新增最大化：嵌入模式下点击按钮临时全屏，退出后恢复原位
• 支持 position、top / left / right / bottom、width / height
• 支持 margin / padding、zIndex
• 支持 align 九宫格对齐（9 个位置）
• 支持 center / centerX / centerY 快捷居中
• 支持 scale 整体缩放、customStyle 自定义根样式
• align / center 自动切换 absolute 定位

方向控制

• 新增 direction：控制嵌入模式方向（auto / horizontal / vertical）
• 新增 fullDirection：控制全屏 / 最大化方向
• 嵌入横向 + 最大化后自动纵向翻转（direction 不再影响全屏默认行为）
• 全屏旋转角度由 rotationDeg 动态计算，不再硬编码 90°
• 保留 rotate / rotateDeg 兼容旧版用法

颜色自定义

• 新增 6 套预设主题：dark、light、blue、green、red、black
• 新增 colors 对象，可一次性批量配置颜色
• 支持单独颜色 prop 覆盖：bgColor、digitColor、sepColor、btnBg 等
• 支持 bgTransparent 透明背景，方便嵌入自定义页面背景
• 支持 digitBorderColor / digitBorderWidth 数字块边框
• 颜色优先级：单独 prop > colors 对象 > theme 预设

大小自定义

• 嵌入模式支持 digitSize、sepSize 自定义字号
• 支持 digitWidth、digitPadding、digitRadius 精细调整数字块
• 支持 digitGap 调整时 / 分 / 秒组间距
• 支持 scale 整体缩放（全屏 / 嵌入均可用）
• 全屏模式按屏幕像素自动计算数字大小，各端一致
• showSeconds 控制是否显示秒，影响全屏自适应尺寸

操作按钮

• 返回、主题切换、全屏 / 退出，均可独立开关
• 支持 showControls 总开关、showBack / showThemeBtn / showFullscreenBtn
• 支持 controls 数组自定义按钮组合
• 支持 controlsPosition（6 个位置）、controlsFixed 贴屏幕
• 支持 showControlLabels 显示按钮文字
• 最大化后保留全部按钮，「全屏 ⛶」自动替换为「退出 ⊡」
• 原生全屏页不再显示多余的「全屏」按钮
• 嵌入模式工具栏纵向排列，修复按钮被挤到看不见的问题
• 最大化遮罩 z-index 提升至 9999

事件

• 新增 @theme-change 主题切换回调
• 新增 @fullscreen-change 最大化状态变化
• 新增 @back 返回点击
• 新增 @theme-click 主题按钮点击

文档

• 重写 README，每个功能点附带参考样例
• 补充分平台配置说明（微信小程序 / H5 / Android / iOS）
• 新增更新日志

1.0（2024-05-29） 下载此版本

1.支持页面最大化最小化 2.支持切换黑白主题 3.返回

平台兼容性

uni-app(3.7.9)

其他

zps-simple-clock

uni-app 翻页时钟组件，一个文件即可使用。

路径：components/zps-simple-clock/zps-simple-clock.vue
通过 easycom 自动引入，无需 import 或注册。

目录

• 快速开始
• 核心概念
• Props 参考（含样例）
• 事件 Events（含样例）
• 平台配置（含样例）
• 常见问题（含样例）
• 更新日志

快速开始

全屏时钟

<template>
  <view class="page">
    <zps-simple-clock theme="dark" />
  </view>
</template>

<style>
page { width: 100%; height: 100%; }
.page { width: 100%; height: 100%; }
</style>

// pages.json
{
  "path": "pages/index/index",
  "style": {
    "navigationStyle": "custom",
    "backgroundColor": "#0d0d0f"
  }
}

嵌入页面

<template>
  <view class="page">
    <zps-simple-clock
      :fullscreen="false"
      align="center"
      direction="horizontal"
      :show-back="false"
    />
  </view>
</template>

<style>
page { width: 100%; height: 100%; }
.page {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}
</style>

核心概念

1. 显示模式

全屏模式：

<zps-simple-clock />
<!-- 等同 -->
<zps-simple-clock :fullscreen="true" />

嵌入模式：

<zps-simple-clock :fullscreen="false" align="center" />

嵌入 + 最大化（点击 ⛶ 进入全屏，点击 ⊡ 退出）：

<zps-simple-clock
  :fullscreen="false"
  align="center"
  direction="horizontal"
  @fullscreen-change="onFullChange"
/>

methods: {
  onFullChange(isFull) {
    console.log('是否最大化', isFull)
  }
}

2. 显示方向

嵌入横向（默认）：

<zps-simple-clock :fullscreen="false" direction="horizontal" />

嵌入纵向 90°：

<zps-simple-clock :fullscreen="false" direction="vertical" align="center" />

嵌入横向，最大化后自动纵向：

<zps-simple-clock :fullscreen="false" direction="horizontal" />
<!-- 点击全屏按钮后自动翻转为 90° -->

全屏也保持横向：

<zps-simple-clock full-direction="horizontal" />

自定义角度（优先级最高）：

<zps-simple-clock :rotate-deg="45" :fullscreen="false" align="center" />

3. 操作按钮

默认按钮（嵌入：主题 + 全屏）：

<zps-simple-clock :fullscreen="false" align="center" />

隐藏返回，保留主题和全屏：

<zps-simple-clock :fullscreen="false" :show-back="false" />

只显示主题按钮：

<zps-simple-clock :show-back="false" :show-fullscreen-btn="false" />

显示按钮文字：

<zps-simple-clock :show-control-labels="true" />

自定义按钮组合：

<zps-simple-clock :controls="['theme', 'full']" :fullscreen="false" />

完全隐藏按钮：

<zps-simple-clock :show-controls="false" />

工具栏位置（右下角 + 贴屏幕）：

<zps-simple-clock
  :fullscreen="false"
  controls-position="bottom-right"
  :controls-fixed="true"
/>

4. 预设主题

<!-- 深色（默认） -->
<zps-simple-clock theme="dark" />

<!-- 浅色 -->
<zps-simple-clock theme="light" />

<!-- 蓝色 -->
<zps-simple-clock theme="blue" />

<!-- 绿色 -->
<zps-simple-clock theme="green" />

<!-- 红色 -->
<zps-simple-clock theme="red" />

<!-- 黑底金字 -->
<zps-simple-clock theme="black" />

Props 参考（含样例）

模式 fullscreen

<zps-simple-clock :fullscreen="false" align="center" />

定位 position / align / top 等

align 居中：

<view class="wrap">
  <zps-simple-clock :fullscreen="false" align="center" />
</view>

.wrap { position: relative; height: 100vh; }

align 右上角 + 偏移：

<zps-simple-clock
  :fullscreen="false"
  align="top-right"
  top="40rpx"
  right="40rpx"
/>

手动定位：

<zps-simple-clock
  :fullscreen="false"
  position="absolute"
  top="200rpx"
  left="50rpx"
  width="600rpx"
/>

center / centerX / centerY：

<!-- 水平 + 垂直居中 -->
<zps-simple-clock :fullscreen="false" :center="true" />

<!-- 仅水平居中 -->
<zps-simple-clock :fullscreen="false" :center-x="true" top="100rpx" />

<!-- 仅垂直居中 -->
<zps-simple-clock :fullscreen="false" :center-y="true" left="40rpx" />

align 全部可选值：

<!-- top-left | top-center | top-right -->
<zps-simple-clock :fullscreen="false" align="top-left" />

<!-- center-left | center | center-right -->
<zps-simple-clock :fullscreen="false" align="center" />

<!-- bottom-left | bottom-center | bottom-right -->
<zps-simple-clock :fullscreen="false" align="bottom-center" />

方向 direction / fullDirection

<!-- 嵌入横向 -->
<zps-simple-clock :fullscreen="false" direction="horizontal" />

<!-- 全屏纵向（默认，可省略 fullDirection） -->
<zps-simple-clock />

<!-- 全屏横向 -->
<zps-simple-clock full-direction="horizontal" />

<!-- 兼容旧版 rotate -->
<zps-simple-clock :rotate="false" :fullscreen="false" />

缩放 scale / customStyle

<!-- 缩小到 80% -->
<zps-simple-clock :fullscreen="false" align="center" scale="0.8" />

<!-- 放大全屏时钟 -->
<zps-simple-clock scale="1.2" />

<!-- 自定义根样式 -->
<zps-simple-clock
  :fullscreen="false"
  :custom-style="{ opacity: 0.9, borderRadius: '16rpx' }"
/>

按钮相关

<!-- 隐藏返回 -->
<zps-simple-clock :show-back="false" />

<!-- 隐藏全屏按钮 -->
<zps-simple-clock :show-fullscreen-btn="false" />

<!-- 禁止主题切换（按钮仍在，点击无效） -->
<zps-simple-clock :enable-theme-toggle="false" />

<!-- 工具栏置顶居中 -->
<zps-simple-clock controls-position="top-center" />

<!-- 嵌入模式，按钮 fixed 到屏幕底部 -->
<zps-simple-clock
  :fullscreen="false"
  :controls-fixed="true"
  controls-position="bottom-center"
/>

controlsPosition 全部可选值：

<zps-simple-clock controls-position="bottom-left" />
<zps-simple-clock controls-position="bottom-center" />
<zps-simple-clock controls-position="bottom-right" />
<zps-simple-clock controls-position="top-left" />
<zps-simple-clock controls-position="top-center" />
<zps-simple-clock controls-position="top-right" />

显示与尺寸

全屏模式数字按屏幕像素自动计算，不受 digitSize 影响。

<!-- 只显示时:分 -->
<zps-simple-clock :show-seconds="false" />

<!-- 嵌入模式自定义大小 -->
<zps-simple-clock
  :fullscreen="false"
  align="center"
  digit-size="106rpx"
  sep-size="100rpx"
/>

<!-- 精细调整数字块 -->
<zps-simple-clock
  :fullscreen="false"
  digit-size="80rpx"
  digit-width="90rpx"
  digit-padding="8rpx 12rpx"
  digit-radius="20rpx"
  digit-gap="16rpx"
/>

颜色

颜色优先级： 单独 prop > colors > theme

<!-- 单独改数字颜色 -->
<zps-simple-clock theme="black" digit-color="#ffd700" />

<!-- 背景透明（嵌入到自定义背景上） -->
<zps-simple-clock :fullscreen="false" :bg-transparent="true" align="center" />

<!-- colors 对象批量配置 -->
<zps-simple-clock
  theme="blue"
  :colors="{
    background: '#111',
    digitBackground: '#222',
    digitColor: '#0ff',
    separatorColor: '#888',
    buttonBackground: '#333',
    buttonIconColor: '#fff'
  }"
/>

<!-- 单独 props 组合 -->
<zps-simple-clock
  background-color="#000"
  digit-background="#1a1a1a"
  digit-color="#00ff88"
  separator-color="#666"
  digit-border-color="#00ff88"
  digit-border-width="2rpx"
/>

事件 Events（含样例）

完整监听示例：

<template>
  <zps-simple-clock
    :fullscreen="false"
    align="center"
    @theme-change="onThemeChange"
    @fullscreen-change=""
    @back="onBack"
    @theme-click="onThemeClick"
  />
</template>

<script>
export default {
  methods: {
    onThemeChange(theme) {
      console.log('当前主题', theme) // 'dark' | 'light'
    },
    (isFull) {
      console.log('最大化状态', isFull)
    },
    onBack() {
      console.log('点击了返回')
    },
    onThemeClick() {
      console.log('点击了主题按钮')
    }
  }
}
</script>

根据最大化状态切换页面样式：

<template>
  <view class="page" :class="{ 'page--full': isClockFull }">
    <zps-simple-clock
      :fullscreen="false"
      align="center"
      @fullscreen-change="isClockFull = $event"
    />
  </view>
</template>

<script>
export default {
  data() {
    return { isClockFull: false }
  }
}
</script>

平台配置（含样例）

微信小程序

// pages.json
{
  "path": "pages/index/index",
  "style": {
    "navigationStyle": "custom",
    "backgroundColor": "#0d0d0f"
  }
}

<!-- pages/index/index.vue -->
<template>
  <view class="page">
    <zps-simple-clock theme="dark" :show-back="false" />
  </view>
</template>

<style>
page { width: 100%; height: 100%; }
.page { width: 100%; height: 100%; }
</style>

H5

<template>
  <view class="page">
    <zps-simple-clock theme="dark" />
  </view>
</template>

<style>
page { width: 100%; height: 100%; }
.page { width: 100%; height: 100%; min-height: 100vh; }
</style>

// pages.json — H5 也建议 custom 导航
{
  "style": {
    "navigationStyle": "custom"
  }
}

Android App

// manifest.json
{
  "app-plus": {
    "safearea": {
      "background": "#0d0d0f",
      "bottom": { "offset": "auto" }
    }
  }
}

// pages.json
{
  "path": "pages/index/index",
  "style": {
    "navigationStyle": "custom",
    "app-plus": {
      "titleNView": false
    }
  }
}

<template>
  <view class="page">
    <zps-simple-clock theme="dark" />
  </view>
</template>

iOS App

// manifest.json
{
  "app-plus": {
    "safearea": {
      "background": "#0d0d0f",
      "bottom": { "offset": "auto" }
    }
  }
}

// pages.json
{
  "style": {
    "navigationStyle": "custom",
    "app-plus": { "titleNView": false }
  }
}

<template>
  <view class="page">
    <zps-simple-clock theme="dark" />
  </view>
</template>

iOS 刘海屏 / Home 指示条：组件自动读取 safeAreaInsets，工具栏不会被遮挡。

跨平台通用页面模板

<template>
  <view class="page">
    <!-- 方案 A：全屏独立页 -->
    <zps-simple-clock theme="dark" :show-back="false" />

    <!-- 方案 B：嵌入现有页面 -->
    <!--
    <zps-simple-clock
      :fullscreen="false"
      align="center"
      direction="horizontal"
      :show-back="false"
    />
    -->
  </view>
</template>

<style>
page {
  width: 100%;
  height: 100%;
  background-color: #0d0d0f;
}
.page {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}
</style>

常见问题（含样例）

Q：时钟没有铺满屏幕？

原因： 使用了嵌入模式，或页面容器没有高度。

<!-- ❌ 错误：嵌入模式不会铺满 -->
<zps-simple-clock :fullscreen="false" />

<!-- ✅ 正确：全屏模式 -->
<zps-simple-clock />

/* 页面必须有高度 */
page { width: 100%; height: 100%; }
.page { width: 100%; height: 100%; }

{ "style": { "navigationStyle": "custom" } }

Q：嵌入模式 align="center" 无效？

原因： 父容器缺少 position: relative 或高度。

<!-- ❌ 父容器无高度 -->
<view>
  <zps-simple-clock :fullscreen="false" align="center" />
</view>

<!-- ✅ 正确 -->
<view class="page">
  <zps-simple-clock :fullscreen="false" align="center" />
</view>

.page {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

Q：按钮不见了？

<!-- ❌ 关闭了全部按钮 -->
<zps-simple-clock :show-controls="false" />

<!-- ✅ 只隐藏返回，保留主题和全屏 -->
<zps-simple-clock :show-back="false" />

<!-- ✅ 嵌入模式按钮在时钟下方 -->
<zps-simple-clock :fullscreen="false" align="center" />

<!-- ✅ 按钮贴屏幕边缘 -->
<zps-simple-clock
  :fullscreen="false"
  :controls-fixed="true"
  controls-position="bottom-center"
/>

Q：最大化后按钮变少？

最大化后「全屏 ⛶」变为「退出 ⊡」，主题按钮仍保留。

<!-- ✅ 最大化后：主题 + 退出 -->
<zps-simple-clock :fullscreen="false" :show-back="false" />

<!-- ❌ controls 写死只有 full，最大化后只剩退出 -->
<zps-simple-clock :controls="['full']" :fullscreen="false" />

<!-- ✅ 自定义时记得包含 theme -->
<zps-simple-clock :controls="['theme', 'full']" :fullscreen="false" />

Q：最大化后时钟没有翻转？

<!-- ✅ 默认：嵌入横向，最大化后自动纵向 -->
<zps-simple-clock :fullscreen="false" direction="horizontal" />

<!-- 若设置了 full-direction="horizontal" 则不会翻转 -->
<zps-simple-clock :fullscreen="false" full-direction="horizontal" />

Q：全屏数字太小？

全屏模式忽略 digitSize，按屏幕自动计算。

<!-- ❌ digitSize 只影响嵌入模式 -->
<zps-simple-clock digit-size="106rpx" />

<!-- ✅ 全屏放大用 scale -->
<zps-simple-clock scale="1.2" />

<!-- ✅ 确认处于全屏模式 -->
<zps-simple-clock :fullscreen="true" />

Q：复制到其他项目怎么用？

1. 复制目录 components/zps-simple-clock/ 到目标项目
2. 页面直接使用：

<template>
  <zps-simple-clock theme="dark" />
</template>

更新日志

v1.1.0

跨平台适配

• 统一屏幕度量：优先 uni.getWindowInfo()，回退 getSystemInfoSync()
• 适配 iOS / Android 安全区（safeAreaInsets），工具栏避开刘海与 Home 指示条
• H5 监听 resize、orientationchange；小程序 / App 监听 uni.onWindowResize
• 页面 activated 时自动刷新布局与时间（App 从后台恢复）
• 秒级定时器对齐整秒，减少各端跳动
• 全屏模式数字始终按屏幕像素自适应，不再受嵌入模式 digitSize（rpx）影响
• 增加 -webkit-backdrop-filter 前缀，提升 iOS 毛玻璃兼容性

方向控制

• 新增 direction：控制嵌入模式方向（auto / horizontal / vertical）
• 新增 fullDirection：控制全屏 / 最大化方向
• 嵌入横向 + 最大化后自动纵向翻转（direction 不再影响全屏默认行为）
• 全屏旋转角度由 rotationDeg 动态计算，不再硬编码 90°

按钮优化

• 最大化后保留全部按钮，「全屏 ⛶」自动替换为「退出 ⊡」
• 原生全屏页（fullscreen=true）不再显示多余的「全屏」按钮
• 嵌入模式工具栏纵向排列，修复按钮被挤到看不见的问题
• 最大化遮罩 z-index 提升至 9999，避免被页面元素遮挡

文档

• 重写 README，每个功能点附带参考样例
• 补充分平台配置说明（微信小程序 / H5 / Android / iOS）

v1.0.0

首次发布

• 翻页时钟核心：时 / 分 / 秒显示，冒号闪烁动画
• 全屏模式（默认）：铺满屏幕，纵向 90° 翻页效果
• 嵌入模式（:fullscreen="false"）：可嵌入任意页面
• 最大化：嵌入模式下点击按钮临时全屏

布局与定位

• 支持 position、top / left / right / bottom、width / height
• 支持 align 九宫格对齐、center / centerX / centerY
• 支持 scale 整体缩放、customStyle 自定义根样式
• align 自动切换 absolute 定位

主题与颜色

• 6 套预设主题：dark、light、blue、green、red、black
• 支持 colors 对象批量配置
• 支持单独颜色 prop 覆盖（背景、数字、冒号、按钮、边框等）
• 支持 bgTransparent 透明背景

操作按钮

• 返回、主题切换、全屏 / 退出
• 可配置 showControls、showBack、showThemeBtn、showFullscreenBtn
• 支持 controls 数组自定义按钮组合
• 支持 controlsPosition（6 个位置）、controlsFixed

显示

• showSeconds 控制是否显示秒
• 嵌入模式可配置 digitSize、sepSize、digitWidth 等

事件

• @theme-change、@fullscreen-change、@back、@theme-click

平台

• 基于 uni-app，支持微信小程序、H5、Android App、iOS App
• 全屏布局使用运行时屏幕像素计算，兼容小程序与 H5

版本信息