本章节重点介绍微信weui 页面层级layers，至此本章节关于微信weui的使用方法，本作者偶尔利用业余时间做出weui的使用案例并分享给大家，前前后后花费了将近一年的时间，因为本站所有关于微信的开发都是本作者一律全部做出案例并测试通过之后才分享出来，所以微信weui这部分也就耽搁了将近一年时间才把所有案例分享完毕，见谅。接下来作者本人将会把重点放在微信小程序开发上面，敬请期待！
实例
1，新建html页面layers.html，并引入css样式文件
<link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css">
记得html设置成移动手机端浏览
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
2，引入jquery库依赖
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
3，在<body></body>之间添加如下代码
<div class="page layers js_show"> <div class="page__hd"> <div class="j_info page__info" data-for="normal"> <h2 class="page__title">WeUI页面层级</h2> <p class="page__desc">用于规范WeUI页面元素所属层级、层级顺序及组合规范。</p> </div> <div class="j_info page__info" data-for="popout" style="display:none"> <h2 class="page__title">Popout</h2> <p class="page__desc">弹出层，作为内容层和导航层的补充，用于承载弹窗通知、操作菜单、菜单、成功或加载中等状态的Toast，表单报错提示等弹出内容。</p> </div> <div class="j_info page__info" data-for="mask" style="display:none"> <h2 class="page__title">Mask</h2> <p class="page__desc">蒙层，配合Popout层使用，用于锁定内容层和导航层操作，不单独使用。</p> </div> <div class="j_info page__info" data-for="navigation" style="display:none"> <h2 class="page__title">Navigation</h2> <p class="page__desc">导航层，位于内容层之上，在用户滑动内容层时可保持位置不动，通常用于承载导航栏等需要固定在页面的元素。</p> </div> <div class="j_info page__info" data-for="content" style="display:none"> <h2 class="page__title">Content</h2> <p class="page__desc">内容层，承载页面主要内容。</p> </div> </div> <div class="page__bd"> <div class="layers j_layers"> <div data-name="popout" class="j_layer layers__layer layers__layer_popout j_transform"><span>Popout</span></div> <div data-name="mask" class="j_layer layers__layer layers__layer_mask j_transform"><span>Mask</span></div> <div data-name="navigation" class="j_layer layers__layer layers__layer_navigation j_transform"><span>Navigation</span></div> <div data-name="content" class="j_layer layers__layer layers__layer_content j_transform"><span>Content</span></div> </div> </div> <div class="page__ft j_bottom"> <a href="javascript:home()"><img src="./images/icon_footer_link.png"></a> </div> </div>
4，JavaScript代码
最好放在</body>后面
<script type="text/javascript" class="layers js_show">
$(function(){
var $layers = $(".layers__layer"), $infos = $(".j_info"),
hideTimeout;
function showInfo(name){
$infos.filter("[data-for='" + name + "']").show().siblings().hide();
}
function hideIfLayerShowing(){
if($layers.filter(".j_transform").length != $layers.length){ // 展示中
showInfo("normal");
$layers.addClass("j_transform");
clearTimeout(hideTimeout);
hideTimeout = setTimeout(function(){
$layers.removeClass("j_hide");
}, 300);
return true;
}
return false;
}
$layers.on("transitionend webkitTransitionend", function(){
var that = this;
if(that.classList.contains("j_transform")){
setTimeout(function(){
that.classList.remove("j_pic");
}, 500);
}else{
that.classList.add("j_pic");
}
});
setTimeout(function(){
$layers.addClass("j_transform");
$(".j_layer").on("click", function(e){
if(hideIfLayerShowing()) return;
var target = this;
if(target.classList.contains("j_layer")){
clearTimeout(hideTimeout);
var name;
target = $(target);
name = target.data("name");
showInfo(name);
target.removeClass("j_transform").siblings().addClass("j_hide");
}
});
}, 500);
});
</script>5，效果
点击最下面的Content层，效果如下
6，完整html代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>www.vxzsk.comV型知识库</title>
</head>
<link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<body>
<div class="page layers js_show">
<div class="page__hd">
<div class="j_info page__info" data-for="normal">
<h2 class="page__title">WeUI页面层级--v型知识库www.vxzsk.com</h2>
<p class="page__desc">用于规范WeUI页面元素所属层级、层级顺序及组合规范。</p>
</div>
<div class="j_info page__info" data-for="popout" style="display:none">
<h2 class="page__title">Popout</h2>
<p class="page__desc">弹出层，作为内容层和导航层的补充，用于承载弹窗通知、操作菜单、菜单、成功或加载中等状态的Toast，表单报错提示等弹出内容。</p>
</div>
<div class="j_info page__info" data-for="mask" style="display:none">
<h2 class="page__title">Mask</h2>
<p class="page__desc">蒙层，配合Popout层使用，用于锁定内容层和导航层操作，不单独使用。</p>
</div>
<div class="j_info page__info" data-for="navigation" style="display:none">
<h2 class="page__title">Navigation</h2>
<p class="page__desc">导航层，位于内容层之上，在用户滑动内容层时可保持位置不动，通常用于承载导航栏等需要固定在页面的元素。</p>
</div>
<div class="j_info page__info" data-for="content" style="display:none">
<h2 class="page__title">Content</h2>
<p class="page__desc">内容层，承载页面主要内容。</p>
</div>
</div>
<div class="page__bd">
<div class="layers j_layers">
<div data-name="popout" class="j_layer layers__layer layers__layer_popout j_transform"><span>Popout</span></div>
<div data-name="mask" class="j_layer layers__layer layers__layer_mask j_transform"><span>Mask</span></div>
<div data-name="navigation" class="j_layer layers__layer layers__layer_navigation j_transform"><span>Navigation</span></div>
<div data-name="content" class="j_layer layers__layer layers__layer_content j_transform"><span>Content</span></div>
</div>
</div>
<div class="page__ft j_bottom">
<a href="javascript:home()"><img src="./images/icon_footer_link.png"></a>
</div>
</div>
</body>
<script type="text/javascript" class="layers js_show">
$(function(){
var $layers = $(".layers__layer"), $infos = $(".j_info"),
hideTimeout;
function showInfo(name){
$infos.filter("[data-for='" + name + "']").show().siblings().hide();
}
function hideIfLayerShowing(){
if($layers.filter(".j_transform").length != $layers.length){ // 展示中
showInfo("normal");
$layers.addClass("j_transform");
clearTimeout(hideTimeout);
hideTimeout = setTimeout(function(){
$layers.removeClass("j_hide");
}, 300);
return true;
}
return false;
}
$layers.on("transitionend webkitTransitionend", function(){
var that = this;
if(that.classList.contains("j_transform")){
setTimeout(function(){
that.classList.remove("j_pic");
}, 500);
}else{
that.classList.add("j_pic");
}
});
setTimeout(function(){
$layers.addClass("j_transform");
$(".j_layer").on("click", function(e){
if(hideIfLayerShowing()) return;
var target = this;
if(target.classList.contains("j_layer")){
clearTimeout(hideTimeout);
var name;
target = $(target);
name = target.data("name");
showInfo(name);
target.removeClass("j_transform").siblings().addClass("j_hide");
}
});
}, 500);
});
</script>
</html>
此文章本站原创，地址 https://www.vxzsk.com/1093.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：python 文件读写
下一篇：python StringIO和BytesIO
^