uniapp progress 文字设置

在 UniApp 开发中，`progress` 组件用于显示进度条，它通常包含一个表示完成度的值，可以通过文字形式展示这个进度。如果你想设置进度的文字部分，你可以通过属性 `status` 或者 `percentage` 来控制。

`status` 属性通常是文字描述，比如 "加载中"、"已完成" 等，你可以将其设置为你需要的文本字符串：

<uni-progress :percentage="progressPercentage" status="正在加载"></uni-progress>

在这里，`progressPercentage` 是一个0到100之间的数值，表示进度百分比。如果设置了 `status`，`percentage` 就不会直接显示，而是会被 `status` 替代。

如果你希望同时显示数字和状态文字，可以分别设置 `percentage` 和 `status`：

<uni-progress :percentage="percentageValue" :status="statusText"></uni-progress>

记得在 Vue 的数据绑定中提供对应的变量：

data() {
  return {
    percentageValue: 75,
    statusText: '已完成 75%'
  }
}

相关问题

uniapp progress border-radius

根据提供的引用，uniapp的进度条border-radius可以通过以下两种方法来实现。

第一种方法是针对原生app项目，在代码中通过设置样式类名来控制进度条的border-radius。具体代码如下：

<view class="progressBoxCon">
  <view class="progressBox" ref="progressBox">
    <view class="progressItem" v-for="(item,index) in progressBox" :key="index">
      <view>{{item.province}}</view>
      <progress class="progress" :num="item.number" :percent="item.percent" :activeColor="item.activeColor" active stroke-width="19" backgroundColor="none"/>
      <view>{{item.ratio}}%</view>
    </view>
  </view>
</view>

<style lang="scss">
.progress {
  border-radius: 10px; /* 这里设置border-radius的值 */
}

.progress::after {
  content: attr(num);
  margin-right: 30upx;
  font-size: 22upx;
  color: #FFFFFF;
  position: absolute;
  margin-left: 25upx;
}
</style>

第二种方法适用于H5项目，可以通过添加一些额外的代码来实现进度条的border-radius。具体代码如下：

mounted() {
  const list = Array.from(this.$refs.progressBox.$el.getElementsByClassName('uni-progress-inner-bar'));
  list.forEach((item,index)=>{
    item.setAttribute("num",this.progressBox[index].number);
  });
}

<style scoped>
.progressBox /deep/ .uni-progress-inner-bar::after {
  content: attr(num);
}

.uni-progress-inner-bar {
  border-radius: 10px; /* 这里设置border-radius的值 */
}
</style>

通过以上两种方法，你可以在uniapp中设置进度条的border-radius属性。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [uniapp的progress进度条组件添加文字](https://blog.csdn.net/document_write/article/details/110704512)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [react-progress-bar:简单的React进度栏组件](https://download.csdn.net/download/weixin_42135753/18211426)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

uniapp 内置组件

1. View：视图容器，用于布局和包含其他组件。
2. Text：文本组件，显示文字内容。
3. Image：图片组件，显示图片内容。
4. Button：按钮组件，用于触发事件。
5. Input：输入框组件，用于用户输入文本。
6. Checkbox：复选框组件，用于选择多个选项。
7. Radio：单选框组件，用于选择一个选项。
8. Switch：开关组件，用于切换开关状态。
9. Slider：滑动条组件，用于选择数值。
10. Picker：选择器组件，用于选择一些选项。
11. Form：表单组件，用于收集用户信息。
12. ScrollView：滚动容器组件，用于支持滚动操作。
13. Swiper：轮播图组件，用于展示多张图片或者内容。
14. Navigator：导航组件，用于跳转页面。
15. Icon：图标组件，用于展示图标。
16. Progress：进度条组件，用于展示加载进度。
17. RichText：富文本组件，用于展示富文本内容。
18. Canvas：画布组件，用于绘制图形和动画。
19. Video：视频组件，用于播放视频。
20. Audio：音频组件，用于播放音频。