这篇“怎么用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是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
以上就是关于“怎么用vue实现顶部左右滑动导航”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。