本文小編為大家詳細(xì)介紹“vue怎么實(shí)現(xiàn)頂部左右滑動(dòng)導(dǎo)航”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue怎么實(shí)現(xiàn)頂部左右滑動(dòng)導(dǎo)航”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)建站推出鐵力免費(fèi)做網(wǎng)站回饋大家。

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

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

vue

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怎么實(shí)現(xiàn)頂部左右滑動(dòng)導(dǎo)航”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。