h5学习笔记：标签页 after

最新推荐文章于 2023-07-23 16:53:56 发布

hero82748274

最新推荐文章于 2023-07-23 16:53:56 发布

阅读量2.9k

点赞数

分类专栏： javascript和Egret相关

本文链接：https://blog.csdn.net/hero82748274/article/details/74012410

版权

javascript和Egret相关专栏收录该内容

97 篇文章 4 订阅

订阅专栏

趁着今天是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里面也很多组件类似的设计，我们可以参考一下。

这里写图片描述
https://ant.design/components/tabs-cn/

hero82748274

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
h5学习笔记：标签页 after

趁着今天是6月的最后一天，整理之前在项目编写的看到的。weui里面很多after 和before的设置经常会看到一头雾水。为了实现一下tabbar的功能。一直查看了一个资料才知道了这是什么回事。一、制作效果要做一个点击后底部会切换绿色横条。这种叫标签页tabs，会很常见，运用很多。QQ音乐和app很常见。二、遇到inline-block 50%的问题我们会制作的时候会遇到一个问题，当设置了两个元素
复制链接

扫一扫