好久没写关于微信开发中的样式库weui的使用方法了，在这里首先介绍下weui中的toast的使用方法。
一、新建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下载。
二、Toast数据加载中窗口实现代码
<div id="loadingToast" class="weui_loading_toast" style="display:none;"> <div class="weui_mask_transparent"></div> <div class="weui_toast"> <div class="weui_loading"> <!-- :) --> <div class="weui_loading_leaf weui_loading_leaf_0"></div> <div class="weui_loading_leaf weui_loading_leaf_1"></div> <div class="weui_loading_leaf weui_loading_leaf_2"></div> <div class="weui_loading_leaf weui_loading_leaf_3"></div> <div class="weui_loading_leaf weui_loading_leaf_4"></div> <div class="weui_loading_leaf weui_loading_leaf_5"></div> <div class="weui_loading_leaf weui_loading_leaf_6"></div> <div class="weui_loading_leaf weui_loading_leaf_7"></div> <div class="weui_loading_leaf weui_loading_leaf_8"></div> <div class="weui_loading_leaf weui_loading_leaf_9"></div> <div class="weui_loading_leaf weui_loading_leaf_10"></div> <div class="weui_loading_leaf weui_loading_leaf_11"></div> </div> <p class="weui_toast_content">数据加载中</p> </div> </div>
上述代码中，div块的样式为
style="display:none;"
也就是此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>数据加载中demo-V型知识库www.vxzsk.com</title> <link rel="stylesheet" type="text/css" href="resource/css/weui.css"> </head> <body> <center><h2>微信weui数据加载中弹窗效果</h2></center> <div id="loadingToast" class="weui_loading_toast"> <div class="weui_mask_transparent"></div> <div class="weui_toast"> <div class="weui_loading"> <!-- :) --> <div class="weui_loading_leaf weui_loading_leaf_0"></div> <div class="weui_loading_leaf weui_loading_leaf_1"></div> <div class="weui_loading_leaf weui_loading_leaf_2"></div> <div class="weui_loading_leaf weui_loading_leaf_3"></div> <div class="weui_loading_leaf weui_loading_leaf_4"></div> <div class="weui_loading_leaf weui_loading_leaf_5"></div> <div class="weui_loading_leaf weui_loading_leaf_6"></div> <div class="weui_loading_leaf weui_loading_leaf_7"></div> <div class="weui_loading_leaf weui_loading_leaf_8"></div> <div class="weui_loading_leaf weui_loading_leaf_9"></div> <div class="weui_loading_leaf weui_loading_leaf_10"></div> <div class="weui_loading_leaf weui_loading_leaf_11"></div> </div> <p class="weui_toast_content">数据加载中</p> </div> </div> </body> </html>
此文章本站原创，地址 https://www.vxzsk.com/590.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：媒体类型
下一篇：springmvc+mybatis 整合
^