官方提供的 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. 腾讯云OCR图片文字识别

    一. OCR OCR (Optical Character Recognition,光学字符识别)是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过检测暗.亮的模式确定其形状,然后用字符识别 ...

  2. SequoiaDB 巨杉数据库Docker镜像使用教程

    为方便用户快速体验,SequoiaDB 巨杉数据库提供基于 Docker 的镜像.本文介绍如何在 Docker 环境下部署 SequoiaDB 分布式集群环境.   集群规划 我们准备在五个容器中部署 ...

  3. LaTeX竖立公式符号

    1.LaTeX技巧668:LaTeX如何实现直立积分号 \usepackage{amsmath,amssymb} \DeclareSymbolFont{EulerExtension}{U}{euex} ...

  4. 《深入理解Java虚拟机》读书笔记二

    第三章 垃圾收集器与内存分配策略 1.判断对象是否已死 引用计数法: 给对象添加一个引用计数器,每当有一个地方引用它时,计数器值就加1,每当引用失效时,计数器值就减1. 任何时刻计数器为0的对象就是不 ...

  5. 题解 【洛谷P4995】跳跳!

    一看题目名字,下意识地认为DP. 打开题目,发现是一道水的贪心,和DP没一分钱关系(毕竟是洛谷最水月赛的T2). 废话不多说. 看完题面,首先想到排序.要将乱序的石头高度变为有序,才能更好地想题. C ...

  6. ansible笔记(13):变量(二)

    1.谈一谈[Gathering Facts]:使用setup模块查看 当我们运行一个playbook时,默认都会运行一个名为“[Gathering Facts]”的任务,前文中已经大致的介绍过这个默认 ...

  7. linux 扩展内存

    一.逻辑卷创建使用 https://www.cnblogs.com/xiaoluo501395377/archive/2013/05/24/3096087.html fdisk -l pvcreate ...

  8. MyBatis 动态代理开发

    MyBatis 动态代理开发 §  Mapper.xml文件中的namespace与mapper接口的类路径相同. §  Mapper接口方法名和Mapper.xml中定义的每个statement的i ...

  9. flask 路由规划(blueprint)

    # 统一路由蓝牙规划 # file:blueprint_route.py from flask import Blueprint route_test = Blueprint("home&q ...

  10. Hackintosh Issues 10.13.x

    Issuses 1: 出现禁行: (-v:) allcating 0x800 pages at 0x2000000 alloc type 2 Load kernal from stream Load ...