uniapp で読み込みの進行状況バーを使用すると、ページ上のデータ読み込みの進行状況バーが表示され、ユーザー エクスペリエンスが向上します。

学習目標:

学习目标如下：

例えば：

• uniapp で読み込みの進行状況バーを使用すると、ページ上のデータ読み込みの進行状況バーが表示され、ユーザー エクスペリエンスが向上します。

---

学習内容:

学习内容如下所示：

1. 関連するプロパティの説明
   

2. プログレスバーの表示

<view v-show="progressVisible" class="progress-box">
						<progress :percent="percent" show-info stroke-width="4" />
					</view>

3. 属性のコントロールを表示するかどうか

progressVisible: false,

4. 進行状況バーを表示する

that.progressVisible = true

5. プログレスバーのスタイルを設定する

.progress-box {
			display: flex;
			height: 50rpx;
			margin-bottom: 60rpx;
	}

---

知識の要約:

提示：这里统计学习计划的总量

• 1. プログレスバーの表示と関連プロパティの設定

<view class="progress-box">
			<progress 
			    :percent="percent"     //百分比
			    show-info    //在进度条右侧显示百分比
			    active="true"     //进度条从左往右的动画
			    active-mode="forwards"      //动画从上次结束点接着播
				:stroke-width="3"     //进度条线的宽度，单位为 px
				backgroundColor="#F5F5F5"      //未选择的进度条的颜色
			  />
		</view>

• 2. 関連する変数を定義する

data() {
		return {
		   percent:0 //百分比0~100
		}
	},

• 3. 電話をかける方法

methods: {
	change(){
        // 开启定时器，定时器同样可以用在请求当中
		let clearInt = setInterval(()=>{
			this.percent ++;
			if(this.percent === 100){
				clearInterval(clearInt)
				uni.showToast({
				title: "加载成功",
				con: "success"
				});
			  }
		},30)
	}
}

• 4. メソッドを直接呼び出すだけです ページに入ったときにメソッドを自動的に呼び出したい場合は、onLoad でメソッドを直接呼び出すことができます。

   onLoad() {
   		  this.change()
   }
  

• スタイル設定

.progress-box {
		display: flex;
		height: 50rpx;
		margin-bottom: 60rpx;
	}