【随笔小记】复刻阿里云盘面包屑横向滚动条

不吃香菜的蟹老板

于 2024-08-14 11:40:10 发布

阅读量147

点赞数 9

分类专栏： html5 + css +JavaScript 文章标签：前端

本文链接：https://blog.csdn.net/qq_35227244/article/details/140927084

版权

html5 + css +JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

导读：h5页面一般是没有面包屑的，文件层级较深的时候面包屑不好操作，但是这里产品需求是有文件夹层级面包屑的~
为了用户能清楚的看出文件的层级，并且要防止面包屑很长超出手机屏幕满足美观简洁的要求，这里复刻了一下阿里云的面包屑的表现方式（第一级固定在左侧，中间面包屑太长做横向滚动，并且最后一个节点始终出现在屏幕中）。

Tab-Document

1、首先，页面布局

若要封装成vue组件，将数组list作为props由父组件传入，再使用v-for渲染数组做页面展示。

  <body>
    <div class="crumb-contaier">
      <ul>
        <li class="crumb-item">
          <span>第一级</span>
        </li>
        <li class="crumb-item">
          <span>第er级</span>
        </li>
        <li class="crumb-item">
          <span>第san 级</span>
        </li>
      </ul>
    </div>
  </body>

2、重点来了，添加样式

 <style>
      * {
        margin: 0;
        padding: 0;
      }

      .crumb-contaier {
        padding: 10px;
      }
      ul {
        display: flex;
        align-items: center;
        width: 100%;
        display: flex;
        overflow-x: scroll;
      }
      li {
        list-style: none;
        display: flex;
        align-items: center;
      }
      .crumb-item span {
        width: max-content;
        overflow: auto;
        font-weight: 400;
        font-size: 14px;
        color: #1181ff;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        text-wrap: nowrap;
      }

      /* 为每项添加箭头 */
      .crumb-item::after {
        display: block;
        content: '';
        width: 10px;
        height: 10px;
        margin: 0 4px;
        background: url('./images/next.png') no-repeat 0 / cover;
      }

      /* 最后一项 */
      .crumb-item:last-child::after {
        display: none;
      }

      .crumb-item:last-child span {
        color: #222222;
      }

      /* 第一项固定在左侧 */
      .crumb-item:first-child {
        position: sticky;
        left: 0px;
        background: #fff;
      }

      *::-webkit-scrollbar {
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
        display: none;
      }
    </style>

3、最后，加一点js交互

让最后一项始终在屏幕内，无需每次手动滑动出来

    <script>
      const lastel = document.querySelector('.crumb-contaier ul').lastElementChild
      lastel.scrollIntoView(false)
    </script>

ps：若是封装的组件，这段就写在watch中，监听到数据变化时让最后一项滑动到视口内！

不吃香菜的蟹老板

关注

9
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【随笔小记】复刻阿里云盘面包屑横向滚动条

让最后一项始终在屏幕内，无需每次手动滑动出来ps：若是封装的组件，这段就写在watch中，监听到数据变化时让最后一项滑动到视口内！
复制链接

扫一扫

专栏目录