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; } } }
以上就是导航的显示了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vue项目有element插件(Vue Element前端应用开发之前端API接口的封装)
- vue 怎么设置滚动条的长度(vue使用better-scroll实现横向滚动的方法实例)
- 使用vue独立开发组件(vue单文件组件的实现)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- vue子视图里再加routerview(vue router-view的嵌套显示实现)
- vue 访问后台接口(vue轮询请求解决方案的完整实例)
- vue 为什么要使用key(详解vue中v-for的key唯一性)
- vue中如何判断请求状态码(关于VUE的编译作用域及slot作用域插槽问题)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue 优雅写法(使用vue实现手写签名功能)
- vue项目上线教程(vue项目中使用骨架屏的方法)
- vue和springboot分页开发实现(解决Vue+SpringBoot+Shiro跨域问题)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- vue-websocket 组件教程(Vue+express+Socket实现聊天功能)
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- 《刘老根3》热播,去世15年的她却再次被 伤害(去世15年的她却再次被)
- 十二星座爱情支配欲指数(十二星座爱情支配欲指数)
- 虐待儿童是发泄支配欲的愚蠢行为(虐待儿童是发泄支配欲的愚蠢行为)
- 你或许不知道你隐藏的支配欲望(你或许不知道你隐藏的支配欲望)
- 把宽体丰田86卖了,换成7.5代高尔夫GTI玩起姿态与性能并存的改装(把宽体丰田86卖了)
- 大众推出了第五代高尔夫GT(大众推出了第五代高尔夫GT)
热门推荐
- php中isset函数有什么功能(PHP中的empty、isset、isnull的区别与使用实例)
- mysql详细学习笔记(Mysql常用命令 详细整理版)
- python读取mat文件(详解Python Matplot中文显示完美解决方案)
- iis应用程序池自动回收
- docker镜像实例(Docker的镜像制作与整套项目一键打包部署的实现)
- dedecms后台内链如何制作(dedecms自定义表单增加验证码的方法分享)
- docker进入mysql查看路径(Docker 环境运行 Mysql 和开启 Binlog 配置主从同步的设置方法)
- 云服务器推荐流程(云服务器入门须知的3个技巧)
- extjs XTemplate的实例
- css实现颜色渐变动画效果(CSS实现文字高光水波渐变的动态效果实例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9