vue实现顶部左右滑动导航的方法

这篇文章主要讲解了“vue实现顶部左右滑动导航的方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“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)"          :        >          {{ 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;    }  }}

以上就是导航的显示了。

感谢各位的阅读，以上就是“vue实现顶部左右滑动导航的方法”的内容了，经过本文的学习后，相信大家对vue实现顶部左右滑动导航的方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！