vue实现顶部左右滑动导航
更新时间:2021年06月29日 10:39:10 作者:Geraint_z
这篇文章主要为大家详细介绍了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; } } }
以上就是导航的显示了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
这篇文章主要介绍了如何在 Vue 中集成 Mozilla/PDF.js ,实现自定义的 PDF 预览器,以及给被预览的 PDF 添加水印2021-01-01Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
这篇文章主要介绍了Vuex持久化插件(vuex-persistedstate)-解决刷新数据消失的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-04-04
最新评论