vue自定義橫向滾動(dòng)條css導(dǎo)航兩行排列布局實(shí)現(xiàn)示例

更新時(shí)間：2023年08月11日 09:56:55 作者：DDD7

這篇文章主要為大家介紹了vue自定義橫向滾動(dòng)條css導(dǎo)航兩行排列布局實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

vue自定義橫向滾動(dòng)條，導(dǎo)航兩行排列布局

需求說明

需求點(diǎn)主要有兩個(gè)

接口返回的導(dǎo)航數(shù)組，要從上到下，從左到右排列，導(dǎo)航的個(gè)數(shù)是可配置的。
滾動(dòng)條的長(zhǎng)度跟滾動(dòng)容器長(zhǎng)度不一樣，需要自己手動(dòng)模擬滾動(dòng)條。

效果

代碼實(shí)現(xiàn)

html：

<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>

js：

export default {
data() {
  return {
    slideWidth: 0, // 滑塊寬
    slideLeft: 0, // 滑塊位置
    slideShow: false, // 是否顯示滑塊
    slideRatio: 0, // 滑塊比例
    lengthRatio: 0, // 列表長(zhǎng)度與屏幕長(zhǎng)度比例（每個(gè)Item占20%屏幕長(zhǎng)度）
  };
},
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; // 列表長(zhǎng)度與屏幕長(zhǎng)度比例（每個(gè)Item占20%屏幕長(zhǎng)度）
      this.slideRatio = 40 / (375 * this.lengthRatio); // 滾動(dòng)列表長(zhǎng)度與滑條長(zhǎng)度比例
      this.slideWidth = 40 / this.lengthRatio; // 當(dāng)前顯示藍(lán)色滑條的長(zhǎng)度(保留兩位小數(shù))
      this.slideShow = true;
    }
  },
  // slideLeft動(dòng)態(tài)變化
  getLeft(e) {
    this.slideLeft = e.target.scrollLeft * this.slideRatio;
  },
},
};

css:

.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;
}
}

以上就是vue自定義橫向滾動(dòng)條css導(dǎo)航兩行排列布局的詳細(xì)內(nèi)容，更多關(guān)于vue橫向滾動(dòng)條css導(dǎo)航布局的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: