uniapp中的progress进度条
官方示例:
实现代码:
<template> <view> <progress :percent="pgList[0]" show-info stroke-width="3" /> <br> <view style="display: flex;"> <progress :percent="pgList[1]" stroke-width="3" /> <uni-icons type="close" color="#dd524d"></uni-icons> </view> <br> <progress :percent="pgList[2]" stroke-width="3" /> <br> <progress :percent="80" activeColor="#10AEFF" stroke-width="3" /> <br> <button @click="setProgress">设置进度</button> <button type="warn" @click="clearProgress">清除进度</button> </view> </template> <script> export default { data() { return { title: progress, pgList: [0, 0, 0] } }, methods: { setProgress() { this.pgList = [20, 40, 60] }, clearProgress() { this.pgList = [0, 0, 0] } } } </script>