# 12.7 环形控制

# 导入组件

该组件是在是原生的组件，无需导入组件。该组件从6.0版本开始生效

# 引入接口

import nativeService from 'src/service/nativeService'

实例 :

# 基础用法

<template>
    <div>
        <midea-scroller-view class="scroller-h-circle-container">
            <mdiea-arc-slider class="circleprogress" :data="chartJson" @onProgress="onProgress" @endProgress="endProgress"   :progressCounter = "progressCounter">
               
            </mdiea-arc-slider>

            <div v-if="!touchCircle" style="height: 500px; width: 750px; background-color: #0088fb; padding-bottom: 20px">
               <text>{{value}}</text>

                <text>{{valueFinal}}</text>
            </div>

            <div v-if="!touchCircle" style="height: 500px; width: 750px; background-color: #333333; padding-bottom: 20px"></div>

            <div v-if="!touchCircle" style="height: 500px; width: 750px; background-color: #afddff; padding-bottom: 20px"></div>
        </midea-scroller-view>

    </div>
</template>


<style scoped>
    .circleprogress {
        width: 550px;
        top: 100px;
        margin-left: 100px;
        height: 550px;
    }
</style>
<script>
    var modal = weex.requireModule('modal')
    export default {
        data() {
            return {
                value: 10,
                valueFinal: 10,
                chartJson: {
                    "completedColor":"#FFFF00", //环形进度条未完成后的颜色默认#267AFF
                    "incompletedColor":"#00ff00", //环形进度条未完成后的颜色，默认透明
                    "thickness":10, //环形进度条宽度，默认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" : 5, //默认是环形进度宽度的一半
                    "pointColor" :  "#000080", //环形进度中的进度球颜色
                    // "circleBackgroundColor":"#00ffff",//环形背景色默认透明

                    "pointImageBase64" :  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAERklEQVRYR82Yf2jUdRjHX5875137cbcfOF1Omfij1DDC3BKEWeCPUMERy2pgkQvBQUY5EfrB6AfIlrVFG4gYJWmaxASV/AHlQKptRTRSywyHu5oudttOt+623T3x3Pe8rbntbiTdvv99P5/n83ne3/fn/Tyf5/ka4nkqxObKJd3RS1Y/FCI8JpBnDLOATASvQJuBVoSvptpoCKTQ6fPQTYUJxXJhYhlkV8t0PxRjWIeQH3Ya6zF0As0IJ51wtOMlc2O8JWOD2CtJbj9FCK8KLACcsXyPMu83cBnDOz1O6tlqBkbbY1QQGXvFHQpQJiHeABy6cKodpiXD/AxYPxcezIbcVEh3QrcfPLfgpw448Tv81gV/9UF/MOoyYGy8aXNQ27XV9IwEcgcI13syDzsVwDMI4fn7MmHT/ZbzBZlYg2M8Alz2WmCO/AK/eiOGBp06RJAK38vmyvDl/9pPGQj6qUV4CrAbA88uhp0FMD0ZptjiP5DBENzog8pG+OQCiEKAIIbDdidlwxkZAqEaCFAuwtvKQHISlD0EryyDe6ZYznsH4JoPzrbC6Va42gNdfshwwhw3rMmDVXkw2wUpSdaavwdhTzPU/gh9qgiDGMNrPQ6qbmskCsJdI0+KcEA1oAzsWDYEICjw/XU4cAGOX4GewNiMuB2wYR5sXgwPz1A6h4C82xxlJGAMm3u2m891pzAIDcMAnBFYou/PPQC7C4cY+PIqlJ8Dz83oJuOei35EbhpUrYTH5wwxsqsBPv7ZejfQ4oDVGr4GTUSZbCNElYahirC+CGamgjJwphVKTkAwZsq5E5fdBgfXw+o8i5E/bkLRsahY/dgo93mpM2kfSpYJ8inCWg3DXQWwfaklwsZ22HIK2nzxC3Kk5SwX7F8LBTkwEIIPfoDdjZHwNZwiSImZViPzA8J3mglnpkH9RiskVYQ7G+DgxfiOYCyYejQli6Cy0BKrhqyyoawAXofhEeOukVIR9unIytlwrMgSyqVOWHN0fBHGy4+K9XQxLMwinCw21sO5axFtCC8Yd7UcEnhah/Y8CqVhaVq0vX4+Xjex7d5aAS8utez2tcCOr6MC/cy4quUbYLkOnd0E+TOsyXVfwHlP7M3jtViRCyefsKybrsOqI9GV3+pxtImQq0OXtsC9qdbkoo+i5xavn3HtVG8Xn7dM/rwFC/dHmDB4FESvCMk61F4GyZHsmFMXyXB3BQJoBm7fZm3WNwg5tVEQfaqJNiGBTIBnkmhiMkSH+30pFZPgPJHQjGnodMDyyXF3hG/RdDR4/v9bFMp93dRNknoikowSXlmFcUyGGlNxjFlt50N2CiRNoNrWAqajFyqbJlJtR44l4X3H7bsqVge2YS4siXRgWu5r2a8dWEsHHL8bHVj00kx0Lzr89g535TaKkQl05eDF0PTfu/LhSDShuUh32MnqD1GIGfF/ArwiI/5PBOn0+eL7P/EPYtpkF4ik2AkAAAAASUVORK5CYII=", //环形进度中的进度球的图片base64
                }
            }
        }
        ,
        methods:{
            onProgress(event){
                this.value = event.progress;
              // modal.toast({
              //     message:"change:"+ event.progress,
              //     duration: 2
              // })
            },
            endProgress(event){
                this.valueFinal = event.progress
                // modal.toast({
                //     message:"progress:"+ event.progress,
                //     duration: 2
                // })
            }
        }
    }
</script>

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

# Attributes

Prop	Type	Required	Default	Description
`charData`	`Object`	`Y`	`{}附表1`	环形进度条参数

附表1：charData参数

Prop	Type	Default	Description
`completedColor`	`String`	`#267AFF`	环形进度条未完成后的颜色
`incompletedColor`	`String`		环形进度条未完成后的颜色，默认透明
`thickness`	`Number`	`4`	环形进度条宽度
`cornerRadius`	`Number`	`40`	环形的半径，默认是width/2
`totalCounter`	`Number`	`360`	环形进度条的最大值
`progressCounter`	`Number`	`0`	设置进度值，默认是从0-360, 默认为0
`autoProgress`	`Boolean`	`false`	设置是否需要自动执行环形进度，默认false, 如果设置为true，则每秒进度值+1操作
`clockwise`	`Boolean`	`true`	环形自动执行进度的方向，默认是true，即顺时针方向，false为逆时针方向
`startingSlice`	`Number`	`180`	环形进度开始的起始位置，当totalCounter为360的时候，0: 0点钟位置起点，90:3点钟位置起点 180:6点钟位置起点
`pointShow`	`Boolean`	`false`	环形进度中的进度球是否需要显示，默认不显示
`pointRadius`	`Number`	`8`	默认是环形进度宽度的一半
`pointColor`	`String`	`#FFFFFF`	环形进度中的进度球颜色
`backgroundColor`	`String`	`#FF3B30`	环形背景色默认透明
`backgroundRadius`	`Number`		环形背景半径，默认和cornerRadius 持平
`text`	`String`	`PCB`	中间字体
`textSize`	`Number`	`14`	字体大小
`textColor`	`String`		字体颜色
`pointImageBase64`	`String`		环形进度中的进度球的图片base64

# Events

Event	Description
`progresscycleTap`	点击组件是触发事件
`onProgress`	滑动中触发
`endProgress`	滑动结束触发

← 12.6 滑动柄 12.8 weex子窗口 →