ToB企服应用市场:ToB评测及商务社交产业平台

标题: uniapp中进度条实现打开页面进度条增长至全布加载完成（转） [打印本页]
作者: 瑞星    时间: 2024-6-21 13:23
标题: uniapp中进度条实现打开页面进度条增长至全布加载完成（转）
在uni-app中，可以通过页面的生命周期函数和API来实现进度条的增长，直至全部加载完成。以下是一个简朴的实现示例：

  2. <template>
  3.   <view>
  4.     <progress :percent="progressPercent" stroke-width="2" />
  5.   </view>
  6. </template>
  8. <script>
  9. export default {
  10.   data() {
  11.     return {
  12.       progressPercent: 0, // 进度条的百分比
  13.     };
  14.   },
  15.   onLoad() {
  16.     // 页面加载时开始增长进度条
  17.     this.increaseProgress();
  18.   },
  19.   methods: {
  20.     increaseProgress() {
  21.       // 模拟进度增长，实际应用中可以根据实际情况进行调整
  22.       const increment = () => {
  23.         if (this.progressPercent < 100) {
  24.           this.progressPercent += 10; // 每次增长10%
  25.           setTimeout(increment, 200); // 延迟200ms继续增长
  26.         }
  27.       };
  28.       increment();
  29.     }
  30.   }
  31. };
  32. </script>
复制代码
在这个示例中，progressPercent 用于跟踪进度条的当前百分比。increaseProgress 方法通过setTimeout递归调用自身，每次延迟200毫秒增长10%，直至进度条达到100%。在实际应用中，你可能需要在页面的onReady或其他生命周期中触发进度条增长，并在接收到数据或完成某些异步操作后更新进度条，最终在onReady或onLoad中设置进度条为100%。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4