# 9.5水波纹（water-ripple）
APP内置组件，不需要前端import导入，通过类似球体水波的UI样式，体现数据余量状态。
使用规则
多用于耗材相关数据展示，以图形化的方式辅助展示剩余占比。# 实例 :
水波纹
扫码预览
# 基础用法
<template>
<div class="wrapper">
<dof-minibar
title="midea-wave-progress-view"
backgroundColor="transparent"
textColor="#000000"
:middle-text-style="headerStyle"
@dofMinibarLeftButtonClicked="minibarLeftButtonClick"
@dofMinibarRightButtonClicked="minibarRightButtonClick"
>
<div slot="left">
<image :src="leftButton" style="height: 55px;width: 55px;transform:translateX(-10px);"></image>
</div>
<div slot="right" class="right-img-wrapper">
<image :src="rightButton" style="height: 32px;width: 32px;"></image>
</div>
</dof-minibar>
<scroller class="scroller">
<div class="center margin-top-80">
<div>
<!-- <midea-wave-progress-view class="drag-slider" :accessible="true" :ariaLabel="水波进度条" :accessibilityHint="水波进度条" :data="chartJson"> </midea-wave-progress-view> -->
<midea-wave-progress-view
class="drag-slider"
:accessible="false"
:ariaHidden="true"
:aria-label="水波进度条111111111"
:accessibility-hint="水波进度条222222222"
:data="chartJson"
>
</midea-wave-progress-view>
</div>
<div class="btn-box">
<text class="button" @click="onAdd">进度+</text>
<text class="button" @click="onSub">进度-</text>
<text class="button" @click="onAnimation1">动画</text>
</div>
</div>
</scroller>
</div>
</template>
<script>
import { DofMinibar, DofButton } from 'dolphin-weex-ui'
const globalEvent = weex.requireModule('globalEvent')
const bridgeModule = weex.requireModule('bridgeModule')
module.exports = {
components: {
DofMinibar,
DofButton
},
data: () => ({
title: 'Dolphin Weex',
message: '动画开',
leftButton: './assets/image/header/back_black@2x.png',
rightButton: './assets/image/header/refresh.png',
headerStyle: {
fontFamily: 'PingFangSC-Regular',
fontWeight: '900',
fontSize: '28px',
letterSpacing: 0
},
chartJson: {
frontWaveColor: '#4D004CC5', //已完成后的颜色默认#FFFFFF
backWaveColor: '#33267AFF',
animate: true,
backgroundColor: '#bbbbbb', //背景色 默认为#000000
progress: 0.3, // 进度 [0 ... 1]
textFont: 18, //字体大小，默认为14
text: '', //文本 默认为空
textColor: '#267AFF' //文本颜色，默认#FFFFFF
}
}),
mounted() {},
methods: {
minibarLeftButtonClick() {},
minibarRightButtonClick() {
this.$reload()
},
onAdd() {
var progress = (this.chartJson.progress += 0.1)
if (progress >= 1) {
progress = 1
}
this.chartJson.progress = progress
this.chartJson.text = '' + Math.round(progress * 100) + '%'
this.chartJson = {
...this.chartJson
}
},
onSub() {
var progress = (this.chartJson.progress -= 0.1)
if (progress <= 0) {
progress = 0
}
this.chartJson.text = '' + Math.round(progress * 100) + '%'
this.chartJson.progress = progress
this.chartJson = {
...this.chartJson
}
},
onAnimation1() {
// if(this.chartJson.animate === false) {
// this.chartJson.animate = true;
// this.message = "动画关";
// }
// if(this.chartJson.animate === true) {
// this.chartJson.animate = false;
// this.message = "动画开";
// }
this.chartJson.animate = !this.chartJson.animate
this.chartJson = {
...this.chartJson
}
}
}
}
</script>
<style scoped>
.app-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.margin-top-80 {
margin-top: 80px;
/* background-color: gray; */
}
.drag-slider {
width: 200px;
height: 200px;
}
.button {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border-radius: 100px;
border: 1px solid blue;
margin-left: 20px;
margin-top: 20px;
}
.btn-box {
display: flex;
align-items: center;
}
</style>
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
chartJson | Object | Y | {} | 配置参数 |
# 参数详情： chartJson （注 1）
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
frontWaveColor | string | N | #4D004CC5 | 前波浪颜色 |
backWaveColor | string | N | #33267AFF | 后波浪颜色 |
animate | Boolean | N | true | 波浪动画 |
backgroundColor | string | N | #000000 | 背景色 |
progress | Boolean | N | true | 进度 [0 ... 1] |
textFont | Boolean | N | 14 | 字体大小，默认为14 |
text | string | N | `` | 文本 默认为空 |
textColor | string | N | transparent | 文本颜色，默认#FFFFFF |