Progress
Progress 用于上传、下载等耗时并且需要显示进度的场景，用户可以随时中断该操作。
一、新建html或jsp页面并引入weui的样式库 weui.css文件
<link rel="stylesheet" type="text/css" href="resource/css/weui.css">
关于weui.css文件可以去https://www.vxzsk.com/load/13.html下载。
二、weui显示上传，下载等进度条的代码
<div class="weui_progress"> <div class="weui_progress_bar"> <div class="weui_progress_inner_bar" style="width: 50%;"></div> </div> <a href="#" class="weui_progress_opr"> <i class="weui_icon_cancel"></i> </a> </div>
三，测试效果
注意上图中最右侧有个红色叉叉
四、完整源码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>weui进度条demo-V型知识库www.vxzsk.com</title> <link rel="stylesheet" type="text/css" href="resource/css/weui.css"> </head> <body> <center><h2>微信weui进度条效果</h2></center> <br><br><br><br> <div class="weui_progress"> <div class="weui_progress_bar"> <div class="weui_progress_inner_bar" style="width: 50%;"></div> </div> <a href="#" class="weui_progress_opr"> <i class="weui_icon_cancel"></i> </a> </div> </body> </html>
此文章本站原创，地址 https://www.vxzsk.com/602.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程