vue自定义横向滚动条css导航两行排列布局实现示例

<div class="home-nav-container">
<ul
  class="home-nav nav-container"
  :style="floorStyle"
  @scroll="getLeft"
>
  <li
    v-for="(item, index) in floors"
    :key="index"
  >
    <img class="nav-icon" :src="item.headImg" alt="" />
  </li>
</ul>
<div v-if="slideShow" class="slide">
  <div class="slide-bar">
    <div class="slide-show" :style="`width:${slideWidth}px;margin-left:${slideLeft<=1 ? 0 : slideLeft}px`"></div>
  </div>
</div>
</div>

export default {
data() {
  return {
    slideWidth: 0, // 滑块宽
    slideLeft: 0, // 滑块位置
    slideShow: false, // 是否显示滑块
    slideRatio: 0, // 滑块比例
    lengthRatio: 0, // 列表长度与屏幕长度比例（每个Item占20%屏幕长度）
  };
},
created() {
  this.getRatio();
},
mounted() {
  window.addEventListener('scroll', this.getLeft);
},
methods: {
  getRatio() {
    if (this.floor.rooms.length <= 10) {
      this.slideShow = false;
    } else {
      this.lengthRatio = Math.floor(this.floor.rooms.length / 2) / 5; // 列表长度与屏幕长度比例（每个Item占20%屏幕长度）
      this.slideRatio = 40 / (375 * this.lengthRatio); // 滚动列表长度与滑条长度比例
      this.slideWidth = 40 / this.lengthRatio; // 当前显示蓝色滑条的长度(保留两位小数)
      this.slideShow = true;
    }
  },
  // slideLeft动态变化
  getLeft(e) {
    this.slideLeft = e.target.scrollLeft * this.slideRatio;
  },
},
};

.home-nav-container {
background-color: #fff;
position: relative;
background-size: 100% 100%;
margin: 0.05rem 0.24rem;
border-radius: 0.2rem;
.home-nav {
  display: flex;
  flex-wrap: wrap;
  &.nav-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    max-height: 3.48rem;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  li {
    width: 20%;
    text-align: center;
    box-sizing: border-box;
  }
}
.slide{
  height: .08rem;
  background:#fff;
  width:100%;
  padding: 0.04rem 0 0.08rem 0;
}
.slide .slide-bar{
  width: 40px;
  bottom: 2px;
  margin: 0 auto;
  height: .08rem;
  background:#f0f0f0;
  border-radius: .08rem;
}
.slide .slide-bar .slide-show{
  height:100%;
  border-radius: .08rem;
  background-color: #d2d2d2;
}
}