微信weui显示进度条(9)

2018年03月10日 08:38 | 2278次浏览 作者原创 版权保护

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>

三,测试效果

微信weui显示进度条

注意上图中最右侧有个红色叉叉

四、完整源码

<%@ 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   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程