Sliding bottom tab 仿 bilibili 安卓客户端滑动 tab

庇耳拉海莱

已于 2022-02-15 20:37:38 修改

阅读量1k

点赞数 1

分类专栏： css动效文章标签： css html 动效

于 2022-02-14 21:43:21 首次发布

本文链接：https://blog.csdn.net/broken_promise/article/details/122931922

版权

css动效专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文档展示了如何使用HTML、CSS和JavaScript创建一个类似Bilibili安卓客户端的滑动底部标签导航。通过隐藏radio按钮并用label显示文字，结合CSS样式和JavaScript事件监听来实现选中标签时滑动条的动态调整。代码简洁易懂，适合初学者巩固基础知识。

摘要由CSDN通过智能技术生成

Sliding bottom tab 仿 bilibili 安卓客户端滑动 tab

先看效果
在这里插入图片描述
😄第一次做效果，咱就是没写过，所以写来看看，顺便把基础知识练习一下

HTML

<nav>
   <div class="container">

     <input type="radio" name="nav" id="nav-song" checked>
     <label  for="nav-song">简介</label>

     <input type="radio" name="nav" id="nav-video">
     <label id="nav-video-lable" for="nav-video">评论 1104</label>

     <input type="radio" name="nav" id="nav-live">
     <label id="nav-live-lable" for="nav-live">点我发弹幕</label>

     <span class="glider"></span>
   </div>
 </nav>

个人觉得代码部分不是很难, 但也有几个地方需要像我一样的小白注意

第一就是使用 <input type="radio"> 做选项卡之间互斥的情况, 并且使用 checked 默认选中某一项
隐藏 <input> 而使用 <label> 作为选项卡显示的汉字;

CSS

整体, 取消所有的 padding, 和 margin, 并设置背景颜色和字体

* {
  padding: 0;
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: rgba(#e6eef9, 0.5);
}

设置导航, 页面居中
vh: 这个单位的意思是整个视窗高度的 1%, 所以 100vh 就是占满整个高度. 对应的当然有 vw 整个视窗宽度的 1%,
```
nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #F3F4F6;
}
```

设置具体的 tab 标签
要求很简单, 只占整个 nav 的 80%, 占多少都行, 这主要是为了截图方便🤭
positive 定位为了方便滑动条的定位

nav .container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #fff;
  padding: 4px;
  position: relative;
  width: 80%;
}

隐藏 radio, 同时设置当这个 radio 状态为 checked 时, 对应的 label 颜色的改变 ( 使用了相邻兄弟选择器 + )
```
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  color: #185ee0;
}
```

设置 label, 居中显示

label {
  display: flex;
  justify-content: center;
  align-items: center;
}

设置滑动条
注意 absolute 定位使得 <span> 变为块元素, 所以高度可以生效

.glider {
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #185ee0;
  transition: all .2s ease-in-out;
}

JavaScript

就是, 刚加载的时候让滚动条处于第一个 tab 下面, 然后每次点击时, 调整滚动条的宽度和位置即可, 记得 offsetWidth 和 offsetLeft 返回的是 number, 所以最后要加上 px

let glider = document.querySelector('.glider');
let firstFlag = true;
document.querySelectorAll('label').forEach((label) => {
  if (firstFlag) {
    glider.style.width = label.offsetWidth + 'px';
    glider.style.left = label.offsetLeft + 'px';
    firstFlag = false;
  }
  label.addEventListener('click', (e) => {
    glider.style.width = e.target.offsetWidth + 'px';
    glider.style.left = e.target.offsetLeft + 'px';
  });
});

最后放上所有代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <div class="container">

      <input type="radio" name="nav" id="nav-song" checked>
      <label for="nav-song">简介</label>

      <input type="radio" name="nav" id="nav-video">
      <label for="nav-video">评论 1104</label>

      <input type="radio" name="nav" id="nav-live">
      <label for="nav-live">点我发弹幕</label>

      <span class="glider"></span>
    </div>
  </nav>

  <script>
    let glider = document.querySelector('.glider');
    let firstFlag = true;
    document.querySelectorAll('label').forEach((label) => {
      if (firstFlag) {
        glider.style.width = label.offsetWidth + 'px';
        glider.style.left = label.offsetLeft + 'px';
        firstFlag = false;
      }
      label.addEventListener('click', (e) => {
        glider.style.width = e.target.offsetWidth + 'px';
        glider.style.left = e.target.offsetLeft + 'px';
      });
    });
  </script>
</body>

</html>

* {
  padding: 0;
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: rgba(#e6eef9, 0.5);
}
nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #F3F4F6;
}
nav .container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #fff;
  /* border-radius: 9999px; */
  padding: 4px;
  position: relative;
  width: 80%;
}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  color: #185ee0;
}

.glider {
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #185ee0;
  transition: all .2s ease-in-out;
}

label {
  display: flex;
  justify-content: center;
  align-items: center;
}

庇耳拉海莱

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Sliding bottom tab 仿 bilibili 安卓客户端滑动 tab

Sliding bottom tab 仿 bilibili 安卓客户端滑动 tab先看效果????第一次做效果，咱就是没写过，所以写来看看，顺便把基础知识练习一下HTML <nav> <div class="container"> <input type="radio" name="nav" id="nav-song" checked> <label for="nav-song">简介</label&
复制链接

扫一扫

专栏目录