uniapp 中 的progress加载进度条 的使用，在 页面显示数据加载的进度条，使用户的使用体验效果更好

**UniApp 中的 Progress 加载进度条的使用**

在开发移动应用时，加载进度条是非常重要的一个组件，它可以让用户感受到应用正在努力地为他们提供数据，而不是简单地显示一个空白页面。今天，我们将讨论如何在 UniApp 中使用 Progress 加载进度条。

**什么是Progress?**

Progress 是一个用于显示加载进度的组件，通常用于表示数据正在被加载或处理中。在 UniApp 中，Progress 组件可以通过 `uni-progress` 模块来实现。

**使用Progress组件**

要在页面中显示 Progress 加载进度条，我们需要在页面的 `.wxml` 文件中添加一个 `` 标签，并且在 `.js` 文件中进行相关配置。

html<!-- pages/index.wxml -->
<page>
 <view>
 <!-- 显示Progress组件 -->
 <progress value="{{progressValue}}" activeColor="#FF0000" backgroundColor="#FFFFFF"></progress>
 </view>
</page>

javascript// pages/index.jsPage({
 data: {
 progressValue:0 // 进度值 },
 onLoad() {
 // 初始化进度值 this.setData({ progressValue:0 });
 // 模拟数据加载过程 setTimeout(() => {
 for (let i =1; i <=100; i++) {
 this.setData({ progressValue: i });
 setTimeout(() => {},16);
 }
 },2000);
 },
});

javascript// pages/index.jsPage({
 data: {
 progressValue:0 // 进度值 },
 onLoad() {
 // 初始化进度值 this.setData({ progressValue:0 });
 // 模拟数据加载过程 setTimeout(() => {
 for (let i =1; i <=100; i++) {
 this.setData({
 progressValue: i,
 activeColor: '#FF0000', // 设置进度条颜色 backgroundColor: '#FFFFFF', // 设置背景颜色 showInfo: true, // 显示信息提示 width: '200px' // 设置进度条宽度 });
 setTimeout(() => {},16);
 }
 },2000);
 },
});