# ArcSlider 环形控制

请扫码查看示例

# 引入

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

# 代码演示

# 基本用法

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

<div class="wrapper">
  <div class="container">
     <cross-view id="mideagespass1" class="crossview" type="midea-arc-slider" crossprops="{{cross_props}}" onCallMethod="onCallMethod"></cross-view>
  </div>
  <div class="btn-wrapper">
   <button class="btn-item" onclick="dofButtonClicked">刷新数据</button>
  </div>
  <div class="param-wrapper">
   <div class="item-group">
     <text class="text-label">设置进度:{{value}}</text>
   </div>
   <div class="item-group">
     <text class="text-label">显示进度:{{valueFinal}}</text>
   </div>
 </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import prompt from '@system.prompt'
export default {
  data: {
    value: 20,
    valueFinal: 20,
    chartJson: {
      completedColor: "#eeffff", //环形进度条未完成后的颜色默认#267AFF
      incompletedColor: "#eef5d5", //环形进度条未完成后的颜色，默认透明
      thickness: 6, //环形进度条宽度，默认4
      totalCounter: 100, //环形进度条的最大值，默认是360
      progressCounter: 20, //设置进度值，默认是从0-360, 默认为0
      padding: 20, //可增加滑动手势的影响范围，圆环距离容器的边界，默认为0
      startingSlice: -100, //弧线进度开始的起始位置，当totalCounter为360的时候，0: 0点钟位置起点，90:3点钟位置起点 180:6点钟位置起点
      endingSlice: 100,  //弧线进度结束时候的位置
      pointShow: true, //环形进度中的进度球是否需要显示，默认不显示
      pointRadius: 8, //默认是环形进度宽度的一半
      pointColor: "#FFFFFF", //环形进度中的进度球颜色
      pointImageBase64: "....", //环形进度中的进度球的图片base64
    },
    cross_props: '',
  },
  onInit() {
    this.cross_props = JSON.stringify(this.chartJson)
  },
  onCallMethod(e) {
    if (e.method == 'onProgress') {
      this.value = e.params.progress
      let tempObj = JSON.parse(JSON.stringify(this.chartJson))
      tempObj.progressCounter = e.params.progress
      this.chartJson = JSON.parse(JSON.stringify(tempObj))
      this.cross_props = JSON.stringify(this.chartJson)
    } else if (e.method == 'endProgress') {
      this.valueFinal = e.params.progress
    } else if (e.method == 'progresscycleTap') {
      prompt.showToast({
        message: 'stone progresscycleTap',
        duration: 2000,
      });
    }
  },
  dofButtonClicked() {
    let tempObj = JSON.parse(JSON.stringify(this.chartJson))
    tempObj.progressCounter = 0
    this.chartJson = JSON.parse(JSON.stringify(tempObj))
    this.cross_props = JSON.stringify(this.chartJson)
    this.value = 0
    this.valueFinal = 0
  },
}

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

# Api

# Prop

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

# 附表1

字段	说明	类型	默认值	是否必须
`completedColor`	环形进度条未完成后的颜色	`String`	`#267AFF`	`否`
`incompletedColor`	环形进度条未完成后的颜色	`String`	`透明`	`否`
`thickness`	环形进度条宽度	`Number`	`4`	`否`
`totalCounter`	环形进度条的最大值	`Number`	`#360`	`否`
`progressCounter`	设置进度值0-360	`Number`	`0`	`否`
`padding`	可增加滑动手势的影响范围	`Number`	`0`	`否`
`startingSlice`	弧线进度开始的起始位置	`Number`	`0`	`否`
`endingSlice`	弧线进度结束时候的位置	`Number`	`0`	`否`
`pointShow`	环形进度中的进度球是否需要显示	`Boolean`	`false`	`否`
`pointRadius`	环形进度中的进度球半径	`Number`	`环形进度宽度的一半`	`否`
`pointColor`	环形进度中的进度球颜色	`String`	`#FFFFFF`	`否`
`pointImageBase64`	环形进度中的进度球的图片base64	`Number`	`环形进度宽度的一半`	`否`

# Methods 原生回调参数

方法名称	说明	备注
`onProgress`	滑动中触发	-
`endProgress`	滑动结束触发	-
`progresscycleTap`	点击组件时触发事件	-