更新记录

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

优化组件

1.0.2（2024-11-25） 下载此版本

修复文挡 发现默认插糟在快手上不生效修改为具名插糟，查看使用说明

1.0.1（2024-08-15） 下载此版本

被全依赖项，无需再手去下载hbxw-utils依赖

平台兼容性

uni-app

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