官方提供的 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 进度条 隐藏的更多相关文章

  1. ajax 上传文件,显示进度条,进度条100%,进度条隐藏,出现卡顿就隐藏进度条,显示正在加载,再显示上传完成

    <form id="uploadForm" method="post" enctype="multipart/form-data"&g ...

  2. android:异步任务asyncTask介绍及异步任务下载图片(带进度条)

    为什么要用异步任务? 在android中仅仅有在主线程才干对ui进行更新操作.而其他线程不能直接对ui进行操作 android本身是一个多线程的操作系统,我们不能把全部的操作都放在主线程中操作 .比方 ...

  3. ASP.NET中二进制流下载文件时进度条的使用

    说明 在下载大文件时,页面会进入假死状态,于是加上一个进度条以标识后台程序正在运行. 目前,做的进度条并不是实时的,并不会根据程序执行的进度正确显示. 目前是将进度条定时加载到90%,然后停止,等待后 ...

  4. mui 滑块开关 进度条 以及如何获取值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. Android 显示或隐藏标题栏进度条TitleProgressBar

    1.新建项目,布局文件如下:activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/ ...

  6. LODOP打印URL显示和隐藏进度条

    不建议使用ADD_PRINT_URL:由于Lodop借用IE下载引擎,与非IE浏览器之间目前不能传递Session(Cookies),所以需要安全验证的页面不要用URL方式打印,要用页面已经下载好的内 ...

  7. js点击什么显示什么的内容,隐藏其它和进度条

    点击什么显示什么的内容 <div style="width:200px; height:40px"> <div class="yiji" st ...

  8. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  9. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

随机推荐

  1. Java时间格式字符串与Date的相互转化

    目录 将Date转化为格式化字符串 时间格式字符串转化为Date @ 将Date转化为格式化字符串 将Date转化为格式化字符串是利用SimpleDateFormat类继承自 java.text.Da ...

  2. opencv-python常用接口

    最直接的是参考官网:https://docs.opencv.org/4.2.0/d6/d00/tutorial_py_root.html

  3. docker-machine之升级linux内核

    虚拟机版本及内核信息 uname -a 或者 uname -r 开始升级内核 1.更新yum源 yum -y update 2,获取内核信息 rpm --import https://www.elre ...

  4. 【网站】Kiwi浏览器中文网

    2020年1月1日上线 访问地址:http://huangenet.gitee.io/kiwibrowser/

  5. C#获取当前不同网卡对应的iP

    C#获取当前不同网卡对应的iP: public string GetLocalIP() { IPAddress localIp = null; try { IPAddress[] ipArray; i ...

  6. codeforces 1282 E. The Cake Is a Lie (dfs+构造)

    链接:https://codeforces.com/contest/1282/problem/E 题意:给的是一张平面图,是一个n边形,每次可以切一刀,切出一个三角形,最终切成n-2个三角形.题目给出 ...

  7. django入门与实践(续)

    完善博客 博客页面设计 页面概要 1.博客主页面 主页面内容 文章标题列表,超链接 发表博客按钮(超链接) 列表编写思路 取出数据库中所有文章对象 将文章对象们打包成列表,传递到前端 前端页面把文章以 ...

  8. laravel环境安装

    参考 https://blog.csdn.net/xiaomayi721025/article/details/84727405 环境准备

  9. 传奇装备锻造升级UPGRADEITEMEX功能详解

    装备升级功能可以指定升级物品及属性,按指定机率得到结果.需要升级的装备物品必须放在身上.命令格式UPGRADEITEMEX 物品位置(0-12) 属性位置(0-14) 成功机率(0-100) 点数机率 ...

  10. 知识图谱学习与实践(6)——从结构化数据进行知识抽取(D2RQ介绍)

    1 概述 D2RQ,含义是把关系型数据库当作虚拟的RDF图数据库进行访问.D2RQ平台是一个将关系型数据库当作虚拟的.只读的RDF图数据库进行访问的系统.提供了基于RDF访问关系数据库的内容,而无需复 ...