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过滤器使用思路(vue 过滤器和自定义指令的使用)
- vue走马灯特效(Javascript结合Vue实现对任意迷宫图片的自动寻路)
- vue计算两个日期差几分钟(vue实现同时设置多个倒计时)
- vue切换图片效果(Vue.js实现图片切换功能)
- vue中的指令及用法(详解Vue进阶构造属性)
- vue封装一个功能函数(vue中利用mqtt服务端实现即时通讯的步骤记录)
- vuex数据持续化(Vuex数据持久化实现的思路与代码)
- vue点击导航进行内容切换(vue实现顶部左右滑动导航)
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- vue三种判断条件(Vue中插槽和过滤器的深入讲解)
- vue慢动作怎么操作(vue开发之moment的介绍与使用)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
- vue 组件布局(Vue实现固定底部组件的示例)
- vuetable表格合并(vue-table实现添加和删除)
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- 靳东领衔打造高精职场 新丽出品《精英律师》曝定妆照(靳东领衔打造高精职场)
- 靳东新剧《精英律师》定档,众星云集,这剧可追(靳东新剧精英律师定档)
- 精英律师 廖佳敏封印恋情曝光,顾婕马失前蹄 你个老不死的(廖佳敏封印恋情曝光)
- 以家人之名广受好评,剧情生动引起观众共鸣,演员张新成圈粉无数(以家人之名广受好评)
- 三兄妹感情再遇波折,人设接连崩塌 《以家人之名》剧情猜不透(三兄妹感情再遇波折)
- 《小敏家》金波想要复婚 这只是他圈套的第1步,更可恶的在后面(小敏家金波想要复婚)
热门推荐
- python自动解数独教学(Python判断有效的数独算法示例)
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- sqlserverdate格式比较(sqlserver之datepart和datediff应用查找当天上午和下午的数据)
- php怎么实现邮件发送(使用php的mail函数实现发送邮件功能)
- 云服务器50g月流量(云服务器怎么查看流量使用情况?)
- 微信小程序开发如何实现自动保存(微信小程序开发实用技巧之数据传递和存储)
- springboot启动内置tomcat(解决spring boot + jar打包部署tomcat 404错误问题)
- dedecms使用安装(使用dedecms搭建自己的本地网站全程图解)
- ExecuteNonQuery、ExecuteScalar、ExecuteReader区别
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9