更新记录
1.0.0(2020-11-26)
下载此版本
1.0.0 第一版
平台兼容性
圆环形计时器,不使用canvas和定时器(适配h5、app-vue、app-nvue,主要是nvue)
示例代码
<template>
<view>
<!-- 圆环计时器 -->
<zwp-ring-timing ref="ring" mode="timing" />
<button @tap="changeState(true)">开始</button>
<button @tap="changeState(false)">停止</button>
</view>
</template>
<script>
export default {
methods: {
changeState(flag) {
this.$refs.ring[flag ? 'start' : 'end']()
}
}
}
</script>
注意事项
- 图表模式仅限看看,没做动画,真要做图表还是用canvas好
- 组件未使用setInterval或者setTimeout,因此计时的时候没有数字显示,如果要的话自己加= =
- nvue中停止计时有点未知bug,不过概率不大
- nvue中计时动画用的是weex的animation模块,这个东西没有停止的功能,因此我是直接用v-if左右横跳加上改变ref名来清除动画的,所以调用停止的时候dom会闪一下很正常,第三条的未知bug应该也是这个引起的
使用说明
名称 |
类型 |
默认值 |
描述 |
mode |
String |
timing |
模式,可选值:timing定时器,chart当作图表用于展示数据 |
activeColor |
String |
#42b983 |
进度条走过的颜色 |
defaultColor |
String |
#EEEEEE |
进度条底色 |
centerBgColor |
String |
#fff |
圆环中间区域的背景色 |
radius |
Number |
100 |
圆形半径或整个组件的一半尺寸(包含了圆环的宽度),单位rpx |
barWidth |
Number |
10 |
圆环宽度,单位rpx |
startDeg |
Number |
0 |
进度开始的角度,单位deg |
duration |
Number |
1 |
timing模式的定时时间,单位s |
value |
Number |
- |
chart模式的值(1~100) |
插槽说明
示例代码
<zwp-ring-timing mode="chart" :value="chartValue">
<text>{{ chartValue }}</text>
</zwp-ring-timing>
事件
名称 |
描述 |
返回值 |
@timingEnd |
计时器模式下,计时完成的回调 |
- |