更新记录

1.0.5（2025-07-17） 下载此版本

修正文挡说明

1.0.4（2025-07-17） 下载此版本

优化组件使用

1.0.3（2025-05-06） 下载此版本

优化组件

平台兼容性

云端兼容性

uni-app(4.06)

hbxw-count-down组件

介绍

自定义(天小时分钟秒毫秒)倒计时组件

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view class="container">
    <text class="title">基础使用</text>
        <hbxw-count-down 
      start="2024/7/17 20:24:00" 
      end="2024/7/17 21:24:00"
      @count="countDownFn"
    />
        <hbxw-count-down start="2024/7/17 20:24:00" end="2024/7/17 21:24:00" :delimiter="['天','小时','分钟','秒']" />
        <hbxw-count-down 
      start="2024/7/17 20:24:00" 
      end="2024/7/17 21:24:00" 
      :delimiter="['天','小时','分钟','秒', '']"
      :commonStyle="{color: 'red',fontSize: '20px'}"
      :interval="20"
      :showMillisecond="true"
     />

     <hbxw-count-down
       start="2024/7/17 20:24:00" 
       end="2024/7/18 21:24:00" 
       :delimiter="['小时','分钟','秒']"
       :commonStyle="{color: 'red',fontSize: '20px'}"
       :showDay="false"
      />

    <text class="title">高度自定义</text>
        <hbxw-count-down start="2024/7/17 20:24:00" end="2024/7/17 21:24:00">
      <template #content="{countDown}">
        <view class="count-down-content">
          <view>给你倒计时数据，由你自由定义怎么渲染</view>
          <view>{{ countDown }}</view>
        </view>
      </template>
    </hbxw-count-down>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            countDownFn(e) {
        console.log('---- countDownFn ----:', e)
      }
        }
    }
</script>

<style lang="scss" scoped>
.container{
  display: flex;
  flex-direction: column;
}
.count-down-content{
  display: flex;
  flex-direction: column;
}
.title{
  width: 100%;
  margin: 20px 0 10px 0;
  font-size: 32rpx;
  font-weight: bold;
}
</style>

API

Props

Events