怎么用vue實(shí)現(xiàn)頂部左右滑動(dòng)導(dǎo)航

這篇“怎么用vue實(shí)現(xiàn)頂部左右滑動(dòng)導(dǎo)航”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么用vue實(shí)現(xiàn)頂部左右滑動(dòng)導(dǎo)航”文章吧。

思路：判斷當(dāng)前點(diǎn)擊項(xiàng)，相對(duì)與屏幕的位置，若點(diǎn)擊的位置，滿足可移動(dòng)的限制，進(jìn)行自動(dòng)滑動(dòng)處理。

實(shí)現(xiàn)代碼如下：

vue

<template>
  <div class="debug-index-page">
    <div class="tab-layout" id="scroller">
      <ul v-for="(tab, idx) in tabList" :key="idx">
        <li
          :id="`tab-${tab.id}`"
          class="tab-item"
          @click="onClickTab(tab)"
          :
        >
          {{ tab.text }}
        </li>
      </ul>
    </div>
  </div>
</template>

JS

export default {

    data() {
        return {
            tabList: [],
        }
    },

    created() {
        let list = [
            "我的貴族",
            "貴族1",
            "我的貴族2",
            "貴族3",
            "貴族4",
            "貴族5",
            "我的貴族6",
            "我的貴族7",
        ];

        list.forEach((text, idx) => {
            this.tabList.push({
                text,
                id: idx, // tab標(biāo)識(shí)
                select: idx == 0, // 是否被選擇
                index: idx // 處于顯示的位置
            });
        });
    },

    computed: {
        curTab() {
            return this.tabList.find(v => v.select);
        }
    },

    methods: {

        onClickTab(tabInfo) {
            let curTab = this.curTab;
            if (curTab.id == tabInfo.id) return;
            let { index, id } = tabInfo;
            // 滑動(dòng)控件
            let scroller = document.getElementById("scroller");
            let speed = scroller.scrollWidth / this.tabList.length;
            let tab = document.getElementById(`tab-${id}`);
            let bWidth = document.body.clientWidth;
            // 點(diǎn)擊右邊
            if (curTab.index < index && tab.clientWidth * index >= bWidth - speed) {
            // 滑動(dòng)的距離
                scroller.scrollLeft = (index + 2) * speed - bWidth;
            } else if (curTab.index > index && (tab.clientWidth * index - (scroller.scrollLeft + bWidth) < speed)) {
            // 滑動(dòng)的距離
                scroller.scrollLeft = (index - 1) * speed;
            }

            curTab.select = false;
            this.tabList[index].select = true;
        }
    }
}

less

.debug-index-page {
    width: 100%;
    overflow:hidden;


  .tab-layout {
    width: 100%;
    overflow-x: scroll;
    display: flex;

    .tab-item {
      width: 1rem;
      text-align: center;
    }
  }
}

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

以上就是關(guān)于“怎么用vue實(shí)現(xiàn)頂部左右滑動(dòng)導(dǎo)航”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。