1500字范文 > vue导航栏滑动切换居中导航栏超出部分可以滑动点击触发滑动对应的index 且滑动时

vue导航栏滑动切换居中导航栏超出部分可以滑动点击触发滑动对应的index 且滑动时

时间：2023-06-22 15:54:24

效果图

模仿婚礼纪电子请帖模块

导航栏超出部分可以滑动，点击触发滑动对应的index，且滑动时导航栏会自动对应

Html部分

<template><div class="contaner"><div class="nav"><div class="tabbar fix-nav" id="navA" ref="navA"><div class="tab_title" v-for="(item, index) in tabbar" :key="index"><div class="tab" ref="tabcolor" @click="handletab(index)"><p :class="{ akhover:changeRed == index}">{{item.title}}</p><p :class="{ red:changeRed == index}" style="display: block;margin: auto"></p></div></div></div><div class="tab_contener" ref="bloc" v-for="(liststr,index) in imglist" :key="index" ><div class="tab_one"><div class="txt">{{liststr.title}}</div><div class="txt_all" @click="handleList(liststr)"><span>全部{{liststr.count}} </span><img src="../../assets/image/arrow.png"></div></div><div class="img_arr"><div class="img_img" v-for="(item,index) in liststr.detail" :key="index"><img :src="item.image" v-if="liststr.count !== 0" @click="handlePreview(item)"></div></div></div></div></div></template>

Script部分

data() {return {navBarFixed: false,// tabbar:[],// imglist:[],tabbar: [{title:'推荐'},{title:'创意趣图'},{title:'中国风'},{title:'时尚大图'},{title:'清新'},{title: "花卉"},{title: "标题"},{title: "标题花卉"}],//json格式，简单列出几个imglist:[{title: "推荐",count:'3'detail:[{image:'/static/invitation/template_11/img/fengmian.jpg'},{image:'/static/invitation/template_12/img/fengmian.jpg'},{image:'/static/invitation/template_13/img/fengmian.png'}]},{title: "创意趣图",count:'3'detail:[{image:'/static/invitation/template_11/img/fengmian.jpg'},{image:'/static/invitation/template_12/img/fengmian.jpg'},{image:'/static/invitation/template_13/img/fengmian.png'}]}],changeRed:'0',step:'',total:'',distance:'',fix:''}},mounted() {// 事件监听滚动条window.addEventListener("scroll", this.watchScroll);let _this =thisthis.$nextTick(()=>{this.tabbar.map((item,index)=>{this.tabbar[index].offsetHeight = this.$refs.bloc[index].offsetHeightthis.tabbar[index].offsetTop = this.$refs.bloc[index].offsetTop }) })this.getInit()},destroyed() {// 移除事件监听window.removeEventListener("scroll", this.watchScroll);},//监听导航滚动宽度触发滑动浏览watch:{changeRed:{handler(val){let offWidth = document.getElementById('navA').offsetWidth; //屏幕宽度let list = this.$refs.tabcolor[val].offsetWidth; //单个菜单宽度let offLeft = this.$refs.tabcolor[val].offsetLeft; //单个菜单距离左侧宽度let width = this.$refs.tabcolor[val].getBoundingClientRect().width//中间值 =( 屏幕宽度 - 导航菜单每一项的宽度 ) / 2;let diffWidth = offWidth / 2 - (list/2); diffWidth = offLeft + (list/2) - (offWidth/2)document.getElementById('navA').scrollLeft = diffWidth}}},methods: {getInit(){// this.$get("/invitation/Newinvitation/getCarousel").then(res => {// if (res.code === 200) {//this.tabbar = res.data.tabbar//this.imglist = res.data.imglist// }// });},handleList(val){console.log(val,222)this.$router.push({path: '/InvitationCardList',query:{id:val.id,title:val.title}})},// 导航栏事件handletab(index) {this.changeRed = index; //赋值颜色// console.log(index, 111);let height = Number(document.getElementById('navA').offsetHeight) // 导航的高度let toTop = this.$refs.bloc[index].offsetTop // index对应内容的高度this.total = toTop - height //减去的高度this.distance = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; // 获取当前页面的滚动条纵坐标位置this.step = this.total// 平滑滚动，时长500ms，每10ms一跳，共50跳跳动位置，导航栏待固定if (this.total > this.distance) { this.smoothDown()} else {let newTotal = this.distance - this.totalthis.step = newTotal this.smoothUp()}},smoothDown() {let step = this.steplet total = this.totallet distance = this.distanceif (distance < total) {setTimeout(() =>{// console.log(document.documentElement.scrollTop,123)distance += stepdocument.body.scrollTop = distance // 网页被卷去的高document.documentElement.scrollTop = distance // 当前页面的滚动条纵坐标位置}, 10);} else {document.body.scrollTop = totaldocument.documentElement.scrollTop = total}},smoothUp() {let step = this.steplet total = this.totallet distance = this.distanceif (distance > total) {setTimeout(()=>{distance -= stepdocument.body.scrollTop = distancedocument.documentElement.scrollTop = distance},10)} else {document.body.scrollTop = totaldocument.documentElement.scrollTop = total}},watchScroll() {// 滚动的距离var scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;let offsetTop = document.getElementById('navA').offsetHeight; //高度//获取计算滚动距离this.tabbar.map((item,index)=>{console.log(item.offsetTop)if(scrollTop > item.offsetTop - 50 && scrollTop < item.offsetTop + item.offsetHeight){this.changeRed = index }})// 滚动的距离如果大于了元素到顶部的距离时，实现吸顶效果if (scrollTop > offsetTop) {this.navBarFixed = true;} else {this.navBarFixed = false;}},}

css部分

vue导航栏滑动切换居中导航栏超出部分可以滑动点击触发滑动对应的index 且滑动时导航栏会自动对应

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。