解决uni-app progress控件不显示问题

最新推荐文章于 2025-05-26 21:02:05 发布

paradoxaaa_

最新推荐文章于 2025-05-26 21:02:05 发布

阅读量1.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： uni-app java 前端

本文链接：https://blog.csdn.net/paradoxaaa_/article/details/139317138

笔记专栏收录该内容

49 篇文章

订阅专栏

官方代码：

<view class="progress-box">
		<progress :percent="80" show-info activeColor="red" stroke-width="10" />
</view>

进度条并不在页面中显示，那么我们需要给进度条加上宽高style="height:10px; width:100%"

<view class="progress-box">
	<progress style="height:10px; width:100%" :percent="80" show-info activeColor="red" stroke-width="10" />
</view>

这样进度条就显示出来了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

paradoxaaa_

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uni-app快速入门

邓邓子的博客

09-23

1万+

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud 公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app，腾讯课堂官方为uni-app录制培训课程，开发者可以放心选择。uni-app 在手，做啥都不愁。即使不跨端，uni-app 也是

微信小程序和uni-app面试高频知识点

qq_53694927的博客

11-27

1108

微信小程序和uni-app面试高频知识点

参与评论您还未登录，请先登录后发表或查看评论

uniapp css无法显示进度条的问题解决

lyz246859的博客

11-28

375

最近在开发uniapp页面时发现即使写了css overflow: scroll强制显示滑动进度条依然没有显示，想了想，肯定是官方的样式表做了相应的处理。

uniapp实现进度条组件

温暖前端的博客

03-04

1724

【代码】uniapp实现进度条组件。

鸿蒙OS&UniApp 制作自定义的进度条组件#三方框架 #Uniapp

热门推荐

03-08

1万+

官方示例：https://uniapp.dcloud.io/component/progress 效果图：实现代码： <template> <view> <progress :percent="pgList[0]" show-info stroke-width="3" /> <br> <view style="display: flex;"> <progress :percent="pgLis

uni-app跨平台开发

o1dkdj的博客

06-15

964

Uni-app 框架提供了许多平台原生的 UI 控件和 API 的访问，但是这些控件和 API 在不同平台之间的支持和表现情况会有所不同，因此我们需要注意在编写代码时尽量避免使用不同平台独有的 API 或特性，同时要特别关注不同平台之间的差异，以便在不同平台上运行时代码能够正确地工作。Uni-app 运行在多个平台上，每个平台的特点是不同的。最后，总体来说，Uni-app 的跨平台开发提供了许多可能性和便利性，但也需要在搭建过程中注意兼容性问题，同时进行版本控制和测试，从而确保应用程序能够稳定地运行。

uniapp video视频铺满容器，不显示控件

hyx_1225的博客

07-06

973

object-fit：当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖。enable-progress-gesture：是否开启控制进度的手势，bool值。show-center-play-btn：是否显示视频中间的播放按钮，bool值。show-center-play-btn：是否显示视频中间的播放按钮，bool值。2、其他地方用代码控制视频播放暂停。1、video标签的属性。

白话uni-app

dcloudio的博客

11-10

976

本文适合对象：已经通过uni-app官网对产品概念有基本了解。熟悉h5，但对小程序、vue不了解传统的h5只有1端，即浏览器。而uni-app可跨多端，虽仍属前端，与传统h5有不同。如果你对h5比较了解，可通过本文快速了解uni-app。网络模型的变化以前网页大多是b/s，服务端代码混合在页面里；现在是c/s，前后端分离，通过js api(类似ajax的uni.request)获取json数据，把数据绑定在界面上渲染。文件类型变化以前是.html文件，开发也是html，运行也是html

ProgressLine:显示进度线的自定义视图

06-01

进度线 ###演示＃＃＃用法 Gradle dependencies{ compile ' com.daimajia.numberprogressbar:library:1.2@aar ' } Maven < dependency> < groupId>com.daimajia.numberprogressbar</ groupId> < artifactId>library</ artifactId> < version>1.2</ version> < type>apklib</ type> </ dependency> 在您自己的代码中使用它： < com.daimajia.numberprogressbar . NumberProgressBar android : id = " @+id/number_progr

uniApp 使用uView遇到的小坑 LineProgress 线形进度条

m0_57547956的博客

09-26

4017

LineProgress 线形进度条 :percent="Salesprogress" 需要传递一个进度条百分比数值 0-100 一般是通过计算得到的，但是因为后端数据返回出现了 169 / 0 没有做异常处理导致除数不能为0 而导致进度条显示为 Infinity || NaN 所以用计算属性进行了错误处理只要是被除数为负数则将库存改为 0 也就是销售情况为 100%完全销售 //计算进度条出售库存百分比 Salesprogress(){ let a.

滑动进度条-自定义样式-uniapp

weixin_48192398的博客

11-11

3942

uniapp 滑动条自定义样式

uView之u-line-progress进度条数值小时显示不全

D_lunar的博客

08-08

1087

【代码】uView之u-line-progress进度条数值小时显示不全。

uView2 LineProgress进度太小时显示不全的一种解决办法

b2894lxlx的博客

10-28

2230

uView中的LineProgress有个getProgressWidth方法，在promise中可获取整个进度条的宽度，接下来就是稍微改造标签即可。至于具体需要键多少才居中，需要自己调整；以及百分比到达多少切换颜色，也可以自己调整。在进度条比较短，进度又比较小时，就有有只显示一个百分号，甚至百分号都不显示的情况，如图。1、获取progress的宽度。uView版本：2.0.34。

uniapp 进度条设置

znx981912的博客

12-09

3188

动态设置是否动画加载百分比同步加载1-100% 文档地址 <view class="progress-box"> <progress percent="100" show-info activeColor="red" active stroke-width="2" /> </view>

uniapp 自定义进度条_如何解决uniapp小程序下载进度条问题

weixin_27199085的博客

01-17

3809

uni-app常用组件 App开发小程序开发这篇就够了

制定持续可量化的目标，不断坚持。

02-21

2710

虽然app-uvue中写在view的text区域的文字，也会被编译器自动包裹一层text组件，看起来也可以使用。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。在app-uvue和app-nvue中，文本只能写在text中，而不能写在view的text区域。需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

uni-app app版本更新wgt

03-03

为了提升用户体验并让用户及时知晓当前正在发生的更新活动，可以在应用程序内部集成progress bar控件用于实时反馈下载状态，并设定一定条件下触发的通知机制告知用户有关可用的新版信息。此过程中可借助`<u-loading>...