简体中文
简体中文
# progressGitCodeGitHub
组件类型：UniProgressElement
进度条
# 兼容性
| Web | 微信小程序 | Android | iOS | HarmonyOS |
|---|---|---|---|---|
| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |
# 属性
| 名称 | 类型 | 默认值 | 兼容性 | 描述 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| duration | number | 30 | 进度增加1%所需毫秒数 | ||||||||||
| percent | number | 0 | 百分比0~100 | ||||||||||
| show-info | boolean | false | 在进度条右侧显示百分比 | ||||||||||
| border-radius | number | 0 | 圆角大小 | ||||||||||
| font-size | number | 16 | 右侧百分比字体大小 | ||||||||||
| stroke-width | number | 6 | 进度条线的宽度，单位px | ||||||||||
| activeColor | string(string.ColorString) | "#09BB07" | 已选择的进度条的颜色 | ||||||||||
| backgroundColor | string(string.ColorString) | "#EBEBEB" | 未选择的进度条的颜色 | ||||||||||
| active | boolean | false | 进度条从左往右的动画 | ||||||||||
| active-mode | string | "backwards" | backwards: 动画从头播；forwards：动画从上次结束点接着播 | ||||||||||
| |||||||||||||
| @activeend | (event: UniProgressActiveendEvent) => void | - | 动画完成事件 | ||||||||||
| string | - | (string) 进度条颜色（请使用activeColor） | |||||||||||
# 事件
# UniProgressActiveendEvent
# UniProgressActiveendEventDetail
# UniProgressActiveendEventDetail 的属性值
| 名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|---|
| curPercent | number | 是 | - | - | - |
# 示例
示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见
示例
<script>
import { state, setEventCallbackNum } from '@/store/index.uts'
import { ItemType } from '@/components/enum-data/enum-data-types'
export default {
data() {
return {
title: 'progress',
pgList: [0, 0, 0, 0] as number[],
curPercent: 0,
showInfo: true,
borderRadius: 0,
fontSize: 16,
strokeWidth: 3,
backgroundColor: '#EBEBEB',
// 组件属性 autotest
active_boolean: false,
show_info_boolean: false,
duration_input: 30,
percent_input: 0,
stroke_width_input: 6,
activeColor_input: "#09BB07",
backgroundColor_input: "#EBEBEB",
active_mode_enum: [{ "value": 0, "name": "backwards" }, { "value": 1, "name": "forwards" }] as ItemType[],
active_mode_enum_current: 0
}
},
methods: {
// 自动化测试
getEventCallbackNum() : number {
return state.eventCallbackNum
},
// 自动化测试
setEventCallbackNum(num : number) {
setEventCallbackNum(num)
},
setProgress() {
this.pgList = [20, 40, 60, 80] as number[]
},
clearProgress() {
this.pgList = [0, 0, 0, 0] as number[]
},
activeend(e : UniProgressActiveendEvent) {
// 自动化测试
if ((e.target?.tagName ?? '').includes('PROGRESS')) {
this.setEventCallbackNum(state.eventCallbackNum + 1)
}
if (e.type === 'activeend') {
this.setEventCallbackNum(state.eventCallbackNum + 2)
}
this.curPercent = e.detail.curPercent
},
progress_touchstart() { console.log("手指触摸动作开始") },
progress_touchmove() { console.log("手指触摸后移动") },
progress_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
progress_touchend() { console.log("手指触摸动作结束") },
progress_tap() { console.log("手指触摸后马上离开") },
change_active_boolean(checked : boolean) { this.active_boolean = checked },
change_show_info_boolean(checked : boolean) { this.show_info_boolean = checked },
confirm_duration_input(value : number) { this.duration_input = value },
confirm_percent_input(value : number) { this.percent_input = value },
confirm_stroke_width_input(value : number) { this.stroke_width_input = value },
confirm_activeColor_input(value : string) { this.activeColor_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
radio_change_active_mode_enum(checked : number) { this.active_mode_enum_current = checked }
}
}
</script>
<template>
<view class="main">
<progress :duration="duration_input" :percent="percent_input" :show-info="show_info_boolean"
:stroke-width="stroke_width_input" :activeColor="activeColor_input" :backgroundColor="backgroundColor_input"
:active="active_boolean" :active-mode="active_mode_enum[active_mode_enum_current].name"
@touchstart="progress_touchstart" @touchmove="progress_touchmove" @touchcancel="progress_touchcancel"
@touchend="progress_touchend" @tap="progress_tap" style="width: 80%">
</progress>
</view>
<scroll-view style="flex: 1">
<view class="content">
<page-head title="组件属性"></page-head>
<boolean-data :defaultValue="false" title="进度条从左往右的动画" @change="change_active_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="在进度条右侧显示百分比" @change="change_show_info_boolean"></boolean-data>
<input-data defaultValue="30" title="进度增加1%所需毫秒数" type="number" @confirm="confirm_duration_input"></input-data>
<input-data defaultValue="0" title="百分比0~100" type="number" @confirm="confirm_percent_input"></input-data>
<input-data defaultValue="6" title="进度条线的宽度，单位px" type="number"
@confirm="confirm_stroke_width_input"></input-data>
<input-data defaultValue="#09BB07" title="已选择的进度条的颜色" type="text"
@confirm="confirm_activeColor_input"></input-data>
<input-data defaultValue="#EBEBEB" title="未选择的进度条的颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<enum-data :items="active_mode_enum" title="backwards: 动画从头播；forwards：动画从上次结束点接着播"
@change="radio_change_active_mode_enum"></enum-data>
</view>
<view>
<page-head title="默认及使用"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="progress-box">
<progress :percent="pgList[0]" :active="true" :border-radius="borderRadius" :show-info="showInfo"
:font-size="fontSize" :stroke-width="strokeWidth" :background-color="backgroundColor" class="progress p"
@activeend="activeend" />
</view>
<view class="progress-box">
<progress :percent="pgList[1]" :stroke-width="3" class="progress p1" />
</view>
<view class="progress-box">
<progress :percent="pgList[2]" :stroke-width="3" class="progress p2" />
</view>
<view class="progress-box">
<progress :percent="pgList[3]" activeColor="#10AEFF" :stroke-width="3" class="progress p3" />
</view>
<view class="progress-control">
<button type="primary" @click="setProgress" class="button">
设置进度
</button>
<button type="warn" @click="clearProgress" class="button">
清除进度
</button>
</view>
</view>
</view>
</scroll-view>
</template>
<style>
.main {
max-height: 250px;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.progress-box {
height: 25px;
margin-bottom: 30px;
}
.button {
margin-top: 10px;
}
</style>
