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
|
<template>
<view>
<view>
<progress :percent="100" active="" show-info="" stroke-width="10" /> //这句的话是进度条的百分比设置为100，让其自动从左到右跑，显示进度条百分比，设置进度条宽度
</view>
<br>
<view>
<progress :percent="100" active="" show-info="" duration="100" stroke-width="10" /> //这条比上面多了个进度条时间设置，duration后面是写毫秒数
</view>
<view>
<progress :percent="pgList[0]" show-info stroke-width="3" /> //跟上面一样，但是多了数组，可以在下面数据元进行相应设置，省去每个设置时间
</view>
<br>
<view>
<progress :percent="pgList[1]" stroke-width="3" />
</view>
<br>
<view>
<progress :percent="pgList[2]" stroke-width="3" />
</view>
<br>
<view>
<progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" /> //进度条颜色更改，应该看得出
</view>
<br>
<view>
<button type="primary" @click="setProgress">设置进度</button> //@是调用方法，click是执行什么方法，后面写方法名
</view>
<br>
<view>
<button type="warn" @click="clearProgress">清除进度</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 数据元存放地
pgList: [0, 0, 0, 0]
}
},
onLoad() {
},
methods: {
setProgress() {
this.pgList = [20, 40, 60, 80] //方法
},
clearProgress() {
this.pgList = [0, 0, 0, 0]
}
}
}
</script>
//style省略，如需设置系统的样式，就到对应地方去写就行
|
