更新记录

1.0.3（2025-12-22） 下载此版本

更新ui

1.0.2（2025-12-22） 下载此版本

1.0.1（2025-12-22）

• 更新属性theme，增加默认主题显示
• 将宽高设置改为size，程序自动计算宽高

  1.0.0（2025-12-22）

• 初始版本发布
• 支持 12/24 小时制
• 支持自定义主题和尺寸
• 流畅的 3D 翻页动画效果

1.0.1（2025-12-22） 下载此版本

1.0.1（2025-12-22）

• 更新属性theme，增加默认主题显示
• 将宽高设置改为size，程序自动计算宽高

平台兼容性

uni-app(3.6.16)

ym-flip-clock

一个精美的翻页时钟组件，支持 12/24 小时制，具有流畅的翻页动画效果和可自定义的主题样式。

特性

• ✨ 流畅的 3D 翻页动画效果
• 🎨 支持自定义主题颜色和尺寸
• ⏰ 支持 12/24 小时制切换
• 📱 适配 uni-app 多端（H5、小程序、App）
• 🎯 基于 Vue3 + TypeScript + Less 开发
• 🔧 智能尺寸计算，支持响应式布局

使用方法

基础用法

<template>
    <view class="container">
        <ym-flip-clock></ym-flip-clock>
    </view>
</template>

<script setup lang="ts">
// 无需导入，配置 easycom 后可直接使用
</script>

<style lang="less" scoped>
.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
</style>

12 小时制

<template>
    <ym-flip-clock hour-format="12"></ym-flip-clock>
</template>

自定义尺寸

<template>
    <ym-flip-clock :size="80"></ym-flip-clock>
</template>

size 属性控制数字卡片的宽度（单位：rpx），高度会根据宽度自动计算（比例为 1.5:1）。

自定义主题

使用预设主题

<template>
    <ym-flip-clock theme="blue"></ym-flip-clock>
</template>

支持的预设主题：dark、light、blue、green、purple

自定义动画时长

<template>
    <ym-flip-clock animation-duration="0.8s"></ym-flip-clock>
</template>

完整配置示例

<template>
    <view class="container">
        <ym-flip-clock 
            hour-format="24"
            :size="80"
            theme="blue"
            animation-duration="1s"
        ></ym-flip-clock>
    </view>
</template>

Props

Theme 对象

当 theme 为对象时，支持以下属性：

预设主题

默认值

• hourFormat: '24'（24小时制）
• size: 60（60rpx）
• theme: { backgroundColor: '#333', color: '#ccc' }（深色主题）
• animationDuration: '1s'（1秒）

组件结构

uni_modules/ym-flip-clock/
├── components/
│   ├── types/
│   │   └── clock.ts          # TypeScript 类型定义
│   ├── utils/
│   │   ├── colorUtils.ts     # 颜色和尺寸工具函数
│   │   └── timeUtils.ts      # 时间处理工具函数
│   └── ym-flip-clock/
│       ├── ym-flip-clock.vue # 主组件
│       └── ym-flip-item.vue  # 数字翻页子组件
├── package.json              # 组件配置
├── readme.md                 # 使用文档
└── changelog.md              # 更新日志