vue点击导航进行内容切换(vue实现顶部左右滑动导航)
类别:编程学习 浏览量:1389
时间:2021-10-18 11:08:40 vue点击导航进行内容切换
vue实现顶部左右滑动导航日常开发中经常用到导航这些东西,写篇文章记录下。该导航实现为点击末尾/起首位置,导航自动滑动出下一项的效果。
思路:判断当前点击项,相对与屏幕的位置,若点击的位置,满足可移动的限制,进行自动滑动处理。
实现如下:
vue
<template> <li class="debug-index-page"> <li 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> </li> </li> </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教学(尤大大新活petite-vue的实现)
- vue切换图片效果(Vue.js实现图片切换功能)
- springbootvue项目代码(Vue+SpringBoot实现支付宝沙箱支付的示例代码)
- vue加载html5动画(vue实现旋转木马动画)
- vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
- vue创建dom节点(Vue批量更新dom的实现步骤)
- vue数据改变页面不刷新(vue列表数据删除后主动刷新页面及刷新方法详解)
- 使用vue独立开发组件(vue单文件组件的实现)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue父组件怎么用子组件的数据(Vue使用v-model封装el-pagination组件的全过程)
- 面试问vue掌握程度如何回答(面试最常问的13种Vue修饰符)
- vue项目部署到服务器的nginx(Nginx部署vue项目和配置代理的问题解析)
- 使用vue组件开发项目(Vue记事本实例详解)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- TVB新剧《黯夜守护者》将播,陈展鹏陈炜首次合作探讨人性(TVB新剧黯夜守护者将播)
- 新晋小花被称女版吴卓羲 将取代滕丽名成为TVB新一代御用女警(新晋小花被称女版吴卓羲)
- 艺人吴卓羲10年警察生涯,演足10年阿Sir,系咩玩法(艺人吴卓羲10年警察生涯)
- 菲律宾潜水(菲律宾潜水价格)
- 泰国人妖(变性手术生殖器要割掉吗)
- 泰国美女(泰国人妖和女性如何区分)
热门推荐
- idea连接不上docker(IDEA使用Docker插件远程部署项目到云服务器的方法步骤)
- dockermysql实例(docker 连接宿主Mysql操作)
- navicatformysql使用视图(Navicat for MySQL的使用教程详解)
- python集合类(Python数据类型之Set集合实例详解)
- sqlserver数据回退(SQLServer数据库处于恢复挂起状态的解决办法)
- cubeide调试问题(如何使用宝塔安装ionCube扩展)
- 常用的Chrome谷歌浏览器插件
- vue 底层原理(浅谈Vue插槽实现原理)
- 部署ssis包提示更改保护级别(SSIS 延迟验证方法)
- python中字符串常用函数或方法(Python3.5字符串常用操作实例详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9