更新记录
1.0.7(2024-01-18)
更新示例代码默认时间为0看不到效果的问题
1.0.6(2023-12-04)
解决暂停继续后有1s延迟,导致动画不流畅的问题,使用毫秒级渲染动画和倒计时,使组件使用更加丝滑。觉得好用麻烦收藏支持一下,有任何问题或者需求加ZhangHaoqwezxc,我尽量解决
1.0.5(2023-09-11)
优化
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.8.0 app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
√ |
× |
√ |
√ |
√ |
使用说明
注册组件后直接使用,支持自定义内容。
使用方式
import countDown from '@/components/zh-countDown/countDown/countDown.vue'
在页面中使用组件
import countDown from '@/components/countDown/countDown.vue'
<countDown ref="down" :widths='300' :breadth='30' activeColor='#01B862' defaultColor='#EDF0F0' isScale :times='times' @endTime='endTime'>
<view>自定义内容</view>
</countDown>
把动画放到App.vue就支持app和h5
@keyframes progross1 {
to {
transform: rotate(360deg);
}
}
@keyframes progross2 {
to {
transform: rotate(0deg);
}
}
参数说明
参数 |
类型 |
默认值 |
描述 |
times |
Number |
10000 |
时间 (单位ms) |
widths |
Number |
200 |
圆环的总体大小 (单位upx) |
breadth |
Number |
30 |
圆环中间区域的大小 (单位upx) |
activeColor |
String |
#01B862 |
圆环中间区域的背景色 |
defaultColor |
String |
#EDF0F0 |
圆环中间区域默认的背景颜色 |
isScale |
Boolean |
false |
是否显示圆环刻度 |
scaleNun |
Number |
40 |
圆环刻度个数 |
scaleAngle |
Number |
6 |
圆环刻度角度值 |
is_reversal |
Boolean |
false |
会否反转进度条 |
@endTime |
|
|
倒计时结束事件 |
@pauseNum |
|
|
倒计时暂停返回剩余时间 |
示例
<template>
<view class="">
<view class="nav" style="display: flex;justify-content: center;">
<countDown ref="down" :widths='300' :breadth='40' activeColor='#01B862' defaultColor='#EDF0F0'
:times.sync='times' @endTime='endTime' @pauseNum='pauseNum'>
<view class="" style="font-size: 26upx;color: #333;">自定义内容{{(times/1000).toFixed(0)}}</view>
</countDown>
</view>
<view class="btn">
<view class="btna" @click="startCounting">
<view class="btn_name">开始</view>
</view>
<view class="btna" @click="pause">
<view class="btn_name">暂停</view>
</view>
<view class="btna" @click="goOn">
<view class="btn_name">继续</view>
</view>
<view class="btna" @click="getReset">
<view class="btn_name">重置</view>
</view>
</view>
<view class="">
<u-toast ref="uToast"></u-toast>
</view>
</view>
</template>
<script>
import countDown from '@/components/zh-countDown/countDown/countDown.vue'
export default {
components: {
countDown
},
data() {
return {
times: 10000,
}
},
methods: {
startCounting() { //开始事件
this.times = 10000
this.$refs.down.start()
},
pause() { //暂停
this.$refs.down.pause()
},
pauseNum(e){ //暂停时返回剩余时间
console.log('剩余时间:',e);
},
goOn(){ //继续
this.$refs.down.goOn()
},
endTime() { //结束
console.log('结束');
},
getReset() { //重置
this.$refs.down.reset()
},
}
}
</script>
<style lang="scss" scoped>
.nav {
margin: 146upx 0 200upx 0;
}
.btn {
display: flex;
align-items: center;
justify-content: space-around;
.btna {
width: 160upx;
height: 64upx;
background: #06D368;
border-radius: 50upx;
display: flex;
justify-content: center;
align-items: center;
.btn_name {
font-size: 32upx;
font-weight: 600;
color: #FFFFFF;
}
}
}
</style>