【微信小程序】progress(93/100)

随着Postman在国内使用遇到的困难,一款名为SmartApi的API调试开发工具应运而生。SmartApi作为作者独立开发的成果,虽然功能相对精简,但覆盖了基本的API调试需求,包括参数填写、响应数据展示、PDF文档分享、Mock功能和本地化解决方案。v1.0.0版本现已上线,提供API列表数据本地化处理和UI优化。下载地址:https://pan.baidu.com/s/1kFAGbsFIk3dDR64NwM5y2A?pwd=csdn

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述
布局如下:

<!--pages/progress/progress.wxml-->
<view class="progress-box">
  <progress percent="20" show-info stroke-width="3"/>
</view>
<view>--</view>
<view class="progress-box">
  <progress percent="40" active stroke-width="3" />
  <icon class="progress-cancel" type="cancel"></icon>
</view>
<view>--</view>
<view class="progress-box">
  <progress percent="60" active stroke-width="3" />
</view>
<view>--</view>
<view class="progress-box">
  <progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>

功能描述
进度条。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

属性说明
属性 类型 默认值 必填 说明 最低版本
percent number 否 百分比0~100 1.0.0

show-info boolean false 否 在进度条右侧显示百分比 1.0.0

border-radius number/string 0 否 圆角大小 2.3.1

font-size number/string 16 否 右侧百分比字体大小 2.3.1

stroke-width number/string 6 否 进度条线的宽度 1.0.0

color string #09BB07 否 进度条颜色(请使用activeColor) 1.0.0

activeColor string #09BB07 否 已选择的进度条的颜色 1.0.0

backgroundColor string #EBEBEB 否 未选择的进度条的颜色 1.0.0

active boolean false 否 进度条从左往右的动画 1.0.0

active-mode string backwards 否 backwards: 动画从头播;forwards:动画从上次结束点接着播 1.7.0

duration number 30 否 进度增加1%所需毫秒数 2.8.2

bindactiveend eventhandle 否 动画完成事件 2.4.1

产品推荐

推荐理由

postman在国内使用已经越来越困难:
1、登录问题严重
2、Mock功能服务基本没法使用
3、版本更新功能已很匮乏
4、某些外力因素导致postman以后能否使用风险较大
出于以上考虑因此笔者自己开发了一款api调试开发工具SmartApi,满足基本日常开发调试api需求

官网地址SmartApi

http://www.smartapi.site/

是的,兄弟们,我还是建立了自己的官网!需要下载的大佬直接去官网下载就可以了蛤,顺便看看官网介绍
看下面的简单的
在这里插入图片描述


旧版本已停止维护

### 关于微信小程序 `progress` 组件不显示的原因分析 在微信小程序开发过程中,如果遇到 `progress` 进度条组件无法正常显示的情况,可能由以下几个原因引起: #### 1. 属性设置错误 确保正确设置了 `progress` 的必要属性。例如,缺少 `percent` 属性可能导致进度条无任何视觉反馈[^4]。 ```xml <progress percent="50" activeColor="#09BB07" backgroundColor="#eee"/> ``` #### 2. 样式冲突或未启用 Vant 等第三方库的兼容模式 当使用像 Vant Weapp 这样的 UI 库时,可能会因为样式覆盖而导致进度条不可见。解决方案之一是在 `app.json` 文件中移除 `"style": "v2"` 配置项,从而避免新版基础组件带来的样式干扰[^5]。 #### 3. Canvas 渲染问题 某些情况下,开发者尝试自定义绘制进度条背景或前景图层时会涉及 canvas 使用不当的问题。需注意小程序内的 `<canvas>` 和 H5 存在差异,在调用绘图 API 如 `drawProgressbg()` 函数前应确认上下文初始化完成并绑定到页面实例上[^3]。 #### 4. 版本依赖与更新提示 随着微信客户端迭代升级,旧版本可能存在渲染异常现象。建议检查当前运行环境是否满足最低支持标准 (>= v1.x),同时查阅最新官方文档获取更精确指导[^1]。 --- 以下是修复代码片段供参考: ```javascript Page({ data: { progressPercent: 80, }, onLoad() { this.setData({ progressPercent: Math.random()*100 }); } }); ``` 对应 WXML 结构如下所示: ```html <!-- 显示动态百分比 --> <view>已完成 {{progressPercent}}%</view> <progress percent="{{progressPercent}}" show-info stroke-width="6" /> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lichong951

你的鼓励决定更新的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值