uni-app中plus.nativeUI.showWaiting setTitle()时超过20%进度就不显示百分比了

在uni-app中，使用plus.nativeUI.showWaiting方法显示等待框时，确实存在这样一个限制：当进度超过20%时，如果设置了标题（title），则进度百分比将不再显示。这是由于原生UI组件的某些设计限制导致的。

为了解决这个问题，同时保持UI的友好性和信息的准确性，你可以考虑以下几种替代方案：

方案一：自定义进度条

当进度超过20%时，你可以隐藏原生的等待框，并使用自定义的进度条组件来显示进度。以下是一个简单的示例，使用uni-app的<view>和<text>组件来模拟进度条：

<template>
  <view v-if="showCustomProgress" class="custom-progress-container">
    <view class="progress-bar" :style="{ width: progress + '%' }"></view>
    <text>{{ progress }}%</text>
  </view>
  <button @click="startProgress">Start Progress</button>
</template>

<script>
export default {
  data() {
    return {
      showCustomProgress: false,
      progress: 0
    };
  },
  methods: {
    startProgress() {
      plus.nativeUI.showWaiting("Loading...", {
        modal: true,
        autoClose: false
      });
      let interval = setInterval(() => {
        this.progress += 10;
        if (this.progress >= 20) {
          plus.nativeUI.closeWaiting();
          this.showCustomProgress = true;
        }
        if (this.progress >= 100) {
          clearInterval(interval);
          this.showCustomProgress = false;
        }
      }, 1000);
    }
  }
};
</script>

<style>
.custom-progress-container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}
.progress-bar {
  height: 20px;
  background-color: #4caf50;
  width: 0;
  transition: width 0.5s ease;
}
</style>

方案二：仅显示文本进度

如果不需要视觉上的进度条，你也可以选择只显示文本进度。在进度超过20%时，关闭原生的等待框，并在页面上显示一个文本元素来更新进度。

方案三：调整UI设计

重新考虑UI设计，避免在标题和进度百分比之间产生冲突。例如，可以只在进度较低时显示百分比，或者在标题下方单独显示进度信息（如果UI布局允许）。

以上方案可以根据你的具体需求和项目情况进行选择和调整。希望这些示例能帮助你解决在uni-app中使用plus.nativeUI.showWaiting时遇到的问题。