趁着今天是6月的最后一天,整理之前在项目编写的看到的。weui里面很多after 和before的设置 经常会看到一头雾水。为了实现一下tabbar的功能。一直查看了一个资料才知道了这是什么回事。
一、制作效果
要做一个点击后底部会切换绿色横条。这种叫标签页tabs,会很常见,运用很多。QQ音乐和app很常见。
二、遇到inline-block 50%的问题
我们会制作的时候会遇到一个问题,当设置了两个元素inline-block;width 等于50%的时候,有一种情况是。死活都不会在同一水平上。查阅资料后,在父类里面设置white-space: nowrap; 后两者多余空格就会消除,两个元素就可以并排在一起了。
三 after的应用
点击后,样式要切换,因此会切换一个样式。例如两项精选和排行。默认是选中精选。
<div class="navbar">
<a class="navbar-item active">
精选
</a>
<a class="navbar-item">
排行
</a>
</div>
选择排行则active的样式就去了其他下面去。
<div class="navbar">
<a class="navbar-item">
精选
</a>
<a class="navbar-item active">
排行
</a>
</div>
运用after的时候,会在内部产生一个元素。效果如下图
.navbar-item.active:after{
content: '';
display: block;
background-color:#09bb07;
position: absolute;
left: 0;
bottom:0;
height: 2px;
width: 100%;
}
四 添加js交互
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Tabbar</title>
</head>
<style type="text/css">
.navbar{
white-space: nowrap;
position: relative;
}
.navbar-item{
width: 50%;
display: inline-block;
text-align: center;
height: 40px;
line-height: 40px;
position: relative;
}
.navbar-item.active
{
color: #09BB07;
}
.navbar-item.active:after{
content: '';
display: block;
background-color:#09bb07;
position: absolute;
left: 0;
bottom:0;
height: 2px;
width: 100%;
}
</style>
<body>
<div class="navbar">
<a class="navbar-item active">
精选
</a>
<a class="navbar-item">
排行
</a>
</div>
<script type="text/javascript">
var arr = document.getElementsByClassName('navbar-item');
var curItem = arr[0];
for (var i = 0; i < arr.length; i++)
{
var item = arr[i];
item.addEventListener('click',onclick);
}
function onclick(e){
curItem.className = 'navbar-item';
var item = e.currentTarget;
item.className = "navbar-item active";
curItem = item;
}
</script>
</body>
</html>
五 扩展
当希望可以切换更多选项的时候,那么宽就要计算了。样式navbar-item中的width 就变成20%。当3个的时候变成33.33%,当4个选项的时候变成25%,2个的时候就50%。
.navbar-item{
width: 20%;
display: inline-block;
text-align: center;
height: 40px;
line-height: 40px;
position: relative;
}
六 更多学习
ant design里面也很多组件类似的设计,我们可以参考一下。