MiniX自绘渲染跨平台框架

# Progresscycle 环形进度条

请扫码查看示例

# 介绍

环形进度条

# 引入

APP内置组件，可直接使用cross-view标签。

# 代码演示

# 基本用法

通过设置 crossprops 和 type 属性,展示环形进度条。

<cross-view if={{isShow}} id="mideagespass1" class="crossview" type="midea-progresscycle-view" crossprops="{{cross_props}}" onCallMethod="onCallMethod"></cross-view>
<div class="param-wrapper">
  <div class="item-group">
    <text class="text-label">起始角度:</text>
    <input class="text-input" type="text" placeholder="起始角度" value="{{chartData.startingSlice}}" />
  </div>
  <div class="item-group">
    <text class="text-label">总进度:</text>
    <input class="text-input" type="text" placeholder="总进度" value="{{chartData.totalCounter}}" />
  </div>
  <div class="item-group">
    <text class="text-label">步长:</text>
    <input class="text-input" type="text" placeholder="步长" value="{{step}}" />
  </div>Ï
</div>

<button onclick="dofButtonClicked">{{intervalHandler?'停止':'开始'}}增加进度(步长/秒)</button>
<button onclick="dofButtonClicked1">增加进度</button>
<button onclick="dofButtonClicked2">重新加载</button>
<button onclick="dofButtonClicked3">清零</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import prompt from '@system.prompt'

export default {
  data: {
    isShow: true,
    intervalHandler: null,
    step: 5,
    chartData: {
      completedColor: "#eef5d5d5",
      incompletedColor: "#eeffffff",
      thickness: 6,
      cornerRadius: 240,
      totalCounter: 360,
      progressCounter: 0,
      autoProgress: false,
      clockwise: true,
      startingSlice: 180,
      pointShow: true,
      pointRadius: 8,
      pointColor: "#FFFFFF",
      pointImageBase64: "data:image/png;base64,iVBORw0……",
    },
    cross_props: '',
  },
  onInit() {
    this.cross_props = JSON.stringify(this.chartData)
  },
  onCallMethod(e) {
    if (e.method == 'progresscycleTap') {
      prompt.showToast({
        duration: 3000,
        message: 'progresscycle is clicked!',
      })
    }
  },
  dofButtonClicked() {
    console.info("vail:progresscycle run")
    let tempObj = JSON.parse(JSON.stringify(this.chartData))
    if (this.intervalHandler) {
      clearInterval(this.intervalHandler)
      this.intervalHandler = null
    } else {
      this.intervalHandler = setInterval(() => {
        console.info("vail:progresscycle Interval run")
        tempObj.progressCounter += (this.step || 1)
        if (tempObj.progressCounter >= tempObj.totalCounter) {
          tempObj.progressCounter = tempObj.totalCounter
          clearInterval(this.intervalHandler)
          this.intervalHandler = null
        }
        this.chartData = JSON.parse(JSON.stringify(tempObj))
        this.cross_props = JSON.stringify(this.chartData)
      }, 1000)
    }
  },

  dofButtonClicked1() {
    let tempObj = JSON.parse(JSON.stringify(this.chartData))
    tempObj.progressCounter += (this.step || 1)
    if (tempObj.progressCounter <= tempObj.totalCounter) {
      if (tempObj.progressCounter >= tempObj.totalCounter) {
        tempObj.progressCounter = tempObj.totalCounter
        clearInterval(this.intervalHandler)
        this.intervalHandler = null
      }
      this.chartData = JSON.parse(JSON.stringify(tempObj))
      this.cross_props = JSON.stringify(this.chartData)
    }
  },

  dofButtonClicked2() {
    this.isShow = false
    Promise.resolve().then(() => {
      this.isShow = true
    })
  },

  dofButtonClicked3() {
    let tempObj = JSON.parse(JSON.stringify(this.chartData))
    tempObj.progressCounter = 0
    this.chartData = JSON.parse(JSON.stringify(tempObj))
    this.cross_props = JSON.stringify(this.chartData)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

# Api

# Prop

字段 说明 类型 默认值 是否必须
type 原生组件类型 String midea-progresscycle-view 是
crossprops 参数 String {}附表1 是

# crossprops（表1）

字段 说明 类型 默认值 是否必须
completedColor 进度条完成后的颜色 String #267AFF 否
incompletedColor 进度条未完成时的颜色 Boolean transparent 否
thickness 进度条宽度 Number 4 否
cornerRadius 环形的半径 Number 环形宽度的一半 否
totalCounter 进度条的最大值 Number 360 否
progressCounter 进度值，取值范围：0-360 Number 0 否
autoProgress 是否需要自动执行环形进度，如果设置为true，则每秒进度值+1 Boolean false 否
clockwise 环形自动执行进度的方向，true即顺时针，false为逆时针 Boolean true 否
startingSlice 环形进度开始的起始位置，当totalCounter为360的时候，0: 0点钟位置起点，90:3点钟位置起点 180:6点钟位置起点 Number 180 否
pointShow 进度球显示标识 Boolean false 否
pointRadius 进度球圆角 Number 环形宽度的一半 否
pointColor 进度球 String - 否
backgroundColor 环形背景色 String transparent 否
backgroundRadius 环形背景半径 Number 和cornerRadius 持平 否
text 环形中间的文案 String - 否
textSize 字体大小 Number 14 否
textColor 字体颜色 String - 否
pointImageBase64 进度球的图片base64 String - 否

# Events

名称 说明 回调参数
onCallMethod 原生回调成功触发 {method}附表2

# method回调方法（表2）

方法名称 说明 回调参数
progresscycleTap 点击组件时触发 -