vue实现顶部左右滑动导航

日常开发中经常用到导航这些东西，写篇文章记录下。该导航实现为点击末尾/起首位置，导航自动滑动出下一项的效果。

思路：判断当前点击项，相对与屏幕的位置，若点击的位置，满足可移动的限制，进行自动滑动处理。

实现如下：

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)\"
          :style=\"`background:${tab.select ? \'red\' : \'none\'}`\"
        >
          {{ 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标识
                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;
            // 滑动控件
            let scroller = document.getElementById(\"scroller\");
            let speed = scroller.scrollWidth / this.tabList.length;
            let tab = document.getElementById(`tab-${id}`);
            let bWidth = document.body.clientWidth;
            // 点击右边
            if (curTab.index < index && tab.clientWidth * index >= bWidth - speed) {
            // 滑动的距离
                scroller.scrollLeft = (index + 2) * speed - bWidth;
            } else if (curTab.index > index && (tab.clientWidth * index - (scroller.scrollLeft + bWidth) < speed)) {
            // 滑动的距离
                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;
    }
  }
}

以上就是导航的显示了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。