vue如何實(shí)現(xiàn)側(cè)邊定位欄

今天小編給大家分享一下vue如何實(shí)現(xiàn)側(cè)邊定位欄的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

實(shí)現(xiàn)思路：

1.通過點(diǎn)擊側(cè)邊欄，定位到響應(yīng)的內(nèi)容
2.滑動(dòng)滑動(dòng)欄，側(cè)邊欄同步高亮對(duì)應(yīng)的item

效果圖如下：

1. 通過點(diǎn)擊側(cè)邊欄，定位到響應(yīng)的內(nèi)容

如果是用html的話我們可以用 錨點(diǎn) 的辦法進(jìn)行定位；
在vue中，我們可以通過獲取組件的高度，將滑動(dòng)欄定位到對(duì)應(yīng)的位置

在進(jìn)入主題之前我們需要先了解3個(gè)關(guān)于獲取高度的屬性

1.scrollTop 滑動(dòng)欄中的滑塊離視區(qū)最頂部的距離

document.documentElement.scrollTop || document.body.scrollTop

2.clientHeight 視區(qū)的高度

document.documentElement.clientHeight || document.body.clientHeight

3.scrollHeight 滑動(dòng)欄里面的滑動(dòng)塊的高度

document.documentElement.scrollHeight || document.body.scrollHeight

vue中我們可以通過this.$refs.xxx.$el.offsetTop獲取組件距離頁(yè)面最頂部的距離，通過賦值給document.documentElement.scrollTop選中組件距離頁(yè)面最頂部的高度，控制滑動(dòng)框滑到頁(yè)面對(duì)應(yīng)位置。相關(guān)代碼如下：

頁(yè)面代碼

// 頁(yè)面組件代碼
<div>
    <btl-header />
    <div class="reports">
      <side-bar v-bind="sideBarData" />
      <div class="main">
        <live-overview-part
          ref="liveOverview"
          :shopNameOptions="allShopName"
          :dateSelectorData="dateType_0" />
        <procurenment-alert
          ref="procurenmentAlert"
          :carBrandOptions="carBrandOptions"
          :shopNameOptions="allShopName"
          :dateSelectorData="dateType_2" />
        <sales-overview
          ref="salesOverview"
          :shopNameOptions="allShopName"
          :dateSelectorData1="pardsType_0"
          :dateSelectorData2="dateType_1" />
        <inquiry-data
          ref="inquiryData"
          :shopNameOptions="allShopName"
          :dateSelectorData="dateType_2" />
        <transaction-data
          ref="transactionData"
          :carBrandOptions="carBrandOptions"
          :shopNameOptions="allShopName"
          :qualityOptions="qualityOptions"
          :colorSeries="colorSeries"
          :dateSelectorData="dateType_2" />
      </div>
    </div>

//  獲取組件距離頁(yè)面頂部高度 ?。?！
 <script>
mounted() {
    // ?。∽⒁?，需要頁(yè)面渲染完才能獲取各個(gè)盒子的高度
    this.sideBarData.offsetTopliveOverview = this.$refs.liveOverview.$el.offsetTop;
    this.sideBarData.offsetTopprocurenmentAlert = this.$refs.procurenmentAlert.$el.offsetTop;
    this.sideBarData.offsetTopsalesOverview = this.$refs.salesOverview.$el.offsetTop;
    this.sideBarData.offsetTopinquiryData = this.$refs.inquiryData.$el.offsetTop;
    this.sideBarData.offsetToptransactionData = this.$refs.transactionData.$el.offsetTop;
   },
  </script>

側(cè)邊欄實(shí)現(xiàn)代碼

// 側(cè)邊欄代碼
<template>
  <hn-card class="sidebar">
    <ul class="nav-tabs">
      <li
        class="activeTip"
        ref="activeTip"></li>
      <li
        @click="clickanchor('liveOverview',0)"
        class="item"
        :class="active==='liveOverview'?'active':'noActive'">實(shí)時(shí)總覽</li>
      <li
        class="item"
        :class="active==='procurenmentAlert'?'active':'noActive'"
        @click="clickanchor('procurenmentAlert',1)">采購(gòu)預(yù)警</li>
      <li
        class="item"
        :class="active==='salesOverview'?'active':'noActive'"
        @click="clickanchor('salesOverview',2)">銷售概覽</li>
      <li
        class="item"
        :class="active==='inquiryData'?'active':'noActive'"
        @click="clickanchor('inquiryData',3)">詢價(jià)數(shù)據(jù)</li>
      <li
        class="item"
        :class="active==='transactionData'?'active':'noActive'"
        @click="clickanchor('transactionData',4)">交易數(shù)據(jù)</li>
      <li
        class="item"
        :class="active==='top'?'active':'noActive'"
        @click="clickanchor('top')">返回頂部</li>
    </ul>
  </hn-card>
</template>

// 側(cè)邊欄js
<script>
methods: {
// 點(diǎn)擊側(cè)邊欄item時(shí)觸發(fā)
// 通過document.documentElement.scrollTop控制滑動(dòng)欄位置
    clickanchor(itemName, i) {
      if (itemName === 'top') {
        document.documentElement.scrollTop = 0; // 滑動(dòng)欄位置
        this.active = itemName;
        this.$refs.activeTip.style.transform = `translateY(${196}px)`;
        return;
      }
      this.$refs.activeTip.style.transform = `translateY(${i * 39}px)`;
      document.documentElement.scrollTop = this[`offsetTop${itemName}`];
      this.active = itemName;
    },
</script>

2. 滑動(dòng)滑動(dòng)欄，側(cè)邊欄同步高亮對(duì)應(yīng)的item

通過監(jiān)聽滑動(dòng)欄滑動(dòng)，獲取滑動(dòng)塊距離頁(yè)面頂部的高度，和組件距離頁(yè)面頂部的高度進(jìn)行對(duì)比，反向設(shè)置滑動(dòng)欄的高亮位置；

// 監(jiān)聽滑動(dòng)欄滾動(dòng)，通過監(jiān)聽滾動(dòng)到的位置，到
    scrollChange() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;
      const windowHeight = document.documentElement.clientHeight || document.body.clientHeight || 0;
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight || 0;
      const allContentOffsettop = [
        'offsetTopliveOverview',
        'offsetTopprocurenmentAlert',
        'offsetTopsalesOverview',
        'offsetTopinquiryData',
        'offsetToptransactionData'];
      if (scrollTop === 0) {
        if (this.active !== 'top') {
          this.active = 'top';
          this.$refs.activeTip.style.transform = `translateY(${196}px)`;
        }
      } else if (scrollTop + windowHeight > scrollHeight || scrollTop + windowHeight === scrollHeight) {
        if (this.active !== 'transactionData') {
          this.active = 'transactionData';
          this.$refs.activeTip.style.transform = `translateY(${157}px)`;
        }
      } else {
        for (let i = 0; i < allContentOffsettop.length; i++) {
          if (this[allContentOffsettop[i]] - 1 > scrollTop) {
            const contentName = allContentOffsettop[i - 1].replace('offsetTop', '');
            if (this.active !== contentName) {
              this.active = contentName;
              this.$refs.activeTip.style.transform = `translateY(${(i - 1) * 39}px)`;
            }
            break;
          }
        }
      }
    },
  },
};

以上就是“vue如何實(shí)現(xiàn)側(cè)邊定位欄”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。