mui 进度条 隐藏
官方提供的 mui(contanier).progressbar().hide(); 并未起作用,DOM是js动态添加的,结果无法隐藏。(越使用,mui 的坑越多,陆续记录中...)
后使用下面的方法,将进度条隐藏了。原理是去掉由 mui-progressbar 类而生成的进度条样式。
var isProgress = $("#progressBar").hasClass("mui-progressbar");
if(isProgress) {
$("#progressBar").removeClass("mui-progressbar")
}
修正上述所说:
上面所说方法也可以隐藏进度条,但官方提供的 hide() 方法,也是可以的。但需要注意,所说的动态,非动态将 DOM 结构用 JS 添加,例如:
$("#progressBar").append("<div class='mui-progressbar'><span></span></div>");
我一开始便是如此理解“动态创建”,于是就无法直接使用 mui("#progressBar").progressbar().hide(); 进行隐藏。
之后查看官方demo (地址:http://www.dcloud.io/hellomui/examples/progressbar.html),使用下文代码,即可正常使用 mui("#progressBar").progressbar().hide(); 隐藏了。
let proVal = 0;//用来模拟进度的数值
document.getElementById("progressBtn").addEventListener("tap", function() {
mui("#progressBar").progressbar({
progress: proVal
}).show(); }, false); setInterval(function() {
proVal += 4;
setProgress()
if(proVal > 100) {
//disposeProgress()
mui("#progressBar").progressbar().hide();
proVal = 0;
}
}, 500); function setProgress() {
mui("#progressBar").progressbar().setProgress(proVal)
}
源网址:https://segmentfault.com/a/1190000011129041
mui 进度条 隐藏的更多相关文章
- ajax 上传文件,显示进度条,进度条100%,进度条隐藏,出现卡顿就隐藏进度条,显示正在加载,再显示上传完成
<form id="uploadForm" method="post" enctype="multipart/form-data"&g ...
- android:异步任务asyncTask介绍及异步任务下载图片(带进度条)
为什么要用异步任务? 在android中仅仅有在主线程才干对ui进行更新操作.而其他线程不能直接对ui进行操作 android本身是一个多线程的操作系统,我们不能把全部的操作都放在主线程中操作 .比方 ...
- ASP.NET中二进制流下载文件时进度条的使用
说明 在下载大文件时,页面会进入假死状态,于是加上一个进度条以标识后台程序正在运行. 目前,做的进度条并不是实时的,并不会根据程序执行的进度正确显示. 目前是将进度条定时加载到90%,然后停止,等待后 ...
- mui 滑块开关 进度条 以及如何获取值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- Android 显示或隐藏标题栏进度条TitleProgressBar
1.新建项目,布局文件如下:activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/ ...
- LODOP打印URL显示和隐藏进度条
不建议使用ADD_PRINT_URL:由于Lodop借用IE下载引擎,与非IE浏览器之间目前不能传递Session(Cookies),所以需要安全验证的页面不要用URL方式打印,要用页面已经下载好的内 ...
- js点击什么显示什么的内容,隐藏其它和进度条
点击什么显示什么的内容 <div style="width:200px; height:40px"> <div class="yiji" st ...
- Android -- 真正的 高仿微信 打开网页的进度条效果
(本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...
- css3圆形百分比进度条的实现原理
原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
随机推荐
- 使用TensorFlow训练模型的基本流程
本文已在公众号机器视觉与算法建模发布,转载请联系我. 使用TensorFlow的基本流程 本篇文章将介绍使用tensorflow的训练模型的基本流程,包括制作读取TFRecord,训练和保存模型,读取 ...
- Oracle体系结构中基本概念,数据库
在Oracle体系结构中包含了基本概念即Oracle数据库与实例,如果你想要了解Oracle体系结构的话,你就必须要了解这两个基本的概念,以下是文章的具体介绍,望你浏览完以下的内容会有所收获. 数据库 ...
- Introduction to Writing Functions in R
目录 在R中编写函数 args(函数名) 创建一个函数的步骤 1.default args Passing arguments between functions Checking arguments ...
- ASP.NET Process Model之二:ASP.NET Http Runtime Pipeline[上篇]
链接:https://www.cnblogs.com/artech/archive/2007/09/13/891262.html 相信大家都使用过ASP.NET进行过基于Web的应用开发,ASP.NE ...
- D0 设计模式
单一职责 一个类只负责一个功能领域中的相应职责.,就一个类而言,应该只有一个引起它变化的原因. 单一职责原则告诉我们: 一个类不能太"累"! 在软件系统中, 一个类( 大到模块, ...
- 修改oracle数据库用户名和密码
第一步:连接数据库 使用ssh工具以root身份连接服务器, 然后切换到oracle用户:su - oracle(回车) 使用sqlplus连接数据库:sqlplus /nolog(回车) 以管理员身 ...
- 未能加载文件或程序集“Autofac.Integration.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=17863af14b0044da”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)
是因为web.config中dependentAssembly结点下的版本号和当前引用的程序集的版本号不一致!
- python面试的100题(10)
18.反转一个整数,例如-123 --> -321 class Solution(object): def reverse(self,x): if -10<x<10: return ...
- TCP/IP详解,卷1:协议--RARP:逆地址解析协议
引言 具有本地磁盘的系统引导时,一般是从磁盘上的配置文件中读取 I P地址.但是无盘机, 如X终端或无盘工作站,则需要采用其他方法来获得 I P地址. 网络上的每个系统都具有唯一的硬件地址,它是由网络 ...
- 在Linux服务器上安装Python3.7
我的Linux版本是CentOS 6,自带2.7版本的Python.源码安装和系统中默认存在的Python不冲突. 1.在Python官网下载源码包,进入官网https://www.python.or ...