uview-ultra v4

Appearance

LineProgress 线形进度条 ​

展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。

平台差异说明 ​

App（vue）App（nvue）H5小程序
√√√√

基本使用 ​

  • 通过percentage设置当前的进度值，该值区间为0-100.
  • 通过activeColor设置进度条的颜色
html
<template>
	<up-line-progress :percentage="30" activeColor="#ff0000"></up-line-progress>
</template>

不显示百分比 ​

不显示百分比值信息

  • show-text参数配置是否显示进度条内百分值
html
<template>
	<up-line-progress :percentage="30" :showText="false"></up-line-progress>
</template>

自定义高度 ​

  • height进度条高度
html
<template>
	<up-line-progress :percentage="30" height="8"></up-line-progress>
</template>

自定义样式(不支持安卓环境的nvue) ​

  • 自定义的数值样式嵌套在默认插槽里
html
<template>
	<up-line-progress :percentage="30">
		<text class="u-percentage-slot">{{30}}%</text>
	</up-line-progress>
</template>

<style lang="scss" scoped>
.u-percentage-slot {
	padding: 1px 5px;
	background-color: $up-warning;
	color: #fff;
	border-radius: 100px;
	font-size: 10px;
	margin-right: -5px;
}
</style>

手动加减 ​

  • 通过控制percentage参数数值达到增减
html
<template>
	<view style="margin-top: 50px;">
		<up-line-progress :percentage="percentage" />
		<view style="display: flex;margin-top: 100px;">
			<button @click="computedWidth('minus')">减少</button>
			<button @click="computedWidth('plus')">增加</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const percentage = ref(30);

computedWidth = (type) => {
  if (type === 'plus') {
    percentage.value = uni.$u.range(0, 100, percentage.value + 10);
  } else {
    percentage.value = uni.$u.range(0, 100, percentage.value - 10);
  }
};
</script>
html
<template>
	<view style="margin-top: 50px;">
		<up-line-progress :percentage="percentage" />
		<view style="display: flex;margin-top: 100px;">
			<button @click="computedWidth('minus')">减少</button>
			<button @click="computedWidth('plus')">增加</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				percentage: 30,
			}
		},
		methods:{
			computedWidth(type) {
				if(type === 'plus') {
					this.percentage = uni.$u.range(0, 100, this.percentage + 10)
				} else {
					this.percentage = uni.$u.range(0, 100, this.percentage - 10)
				}
			}
		}
	}
</script>

右侧演示页面源代码地址 ​

点击以下链接以查看右侧演示页面的源码


 github  gitee

API ​

Props ​

参数说明类型默认值可选值
activeColor进度条激活部分的颜色String#19be6b-
inactiveColor进度条的底色，默认为灰色String#ececec-
percentage进度百分比，数值String | Number0-
showText是否在进度条内部显示百分比的值Booleantruefalse
height进度条的高度，默认单位pxString | Number12-

Slots ​

名称说明
default传入自定义的显示内容，将会覆盖默认显示的百分比值