uniapp中进度条实现打开页面进度条增长至全布加载完成（转）

最新推荐文章于 2025-06-29 22:02:33 发布

原创最新推荐文章于 2025-06-29 22:02:33 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

在uni-app中，可以通过页面的生命周期函数和API来实现进度条的增长，直至全部加载完成。以下是一个简单的实现示例：


<template>
  <view>
    <progress :percent="progressPercent" stroke-width="2" />
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      progressPercent: 0, // 进度条的百分比
    };
  },
  onLoad() {
    // 页面加载时开始增长进度条
    this.increaseProgress();
  },
  methods: {
    increaseProgress() {
      // 模拟进度增长，实际应用中可以根据实际情况进行调整
      const increment = () => {
        if (this.progressPercent < 100) {
          this.progressPercent += 10; // 每次增长10%
          setTimeout(increment, 200); // 延迟200ms继续增长
        }
      };
      increment();
    }
  }
};
</script>

在这个示例中，progressPercent 用于跟踪进度条的当前百分比。increaseProgress 方法通过setTimeout递归调用自身，每次延迟200毫秒增加10%，直至进度条达到100%。在实际应用中，你可能需要在页面的onReady或其他生命周期中触发进度条增长，并在接收到数据或完成某些异步操作后更新进度条，最终在onReady或onLoad中设置进度条为100%。