vue点击导航页面实现自动滚动到特定位置
更新时间:2024年03月01日 09:07:49 作者:前端深造中
这篇文章主要介绍了vue点击导航页面实现自动滚动到特定位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
效果预览
npm i element-ui -S
下载安装element组件库,导航我们使用element组件库中的样式
type="primary"刚好作为我们导航激活后的样式
省去了我们写样式的时间
到 main.js文件中全局引入element组件
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
代码实现
<!-- 为每一个按钮 添加点击事件 用来作为按钮的切换 我们将所有的按钮导航装到 一个div中,给这个div添加点击事件就可以了(不知道为什么的小伙伴可以去看一下事件冒泡) 由于进入页面要有默认激活项,我们将data属性中的active赋值为1,就可以了,每次点击,只需要通过 访问dataset中的属性动态的赋值给active就可以实现切换啦 --> <div @click="dbclick"> <el-button :type="active=='1'?'primary':''" data-index="1">新建</el-button> <el-button :type="active=='2'?'primary':''" data-index="2">销毁</el-button> <el-button :type="active=='3'?'primary':''" data-index="3">转办</el-button> <el-button :type="active=='4'?'primary':''" data-index="4">发送</el-button> </div> <script> export default{ data() { return { active: "1" } }, } </script>
<!-- 接下来我们定义内容展示部分,用一个大的盒子将其包裹,然后给与每一个子div不同的id,到后期我们会 使用到,本人比较懒散,内容呢直接在这里循环了50次,以此来撑开盒子高度 --> <div class="height"> <div id="newview" ref="newview"> <span v-for="(item,index) in 50" :key="index" style="background:whitesmoke;">这是新建内容</span> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="distory"> <span v-for="(item,index) in 50" :key="index" style="background:yellowgreen;">这是销毁内容</span> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="turn"> <span v-for="(item,index) in 50" :key="index" style="background:pink;">这是转办内容</span> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="contantsend"> <span v-for="(item,index) in 50" :key="index" style="background:yellow;">这是发送内容</span> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <script> export default { methods: { dbclick(e) { this.active=e.target.dataset.index // scrollIntoView 方法为滚动到指定元素位置 所以为了得到滚动元素的位置 // 为每一个元素添加了id 当然初了id还可以使用ref为元素绑定值,通过this.$refs获取 // 看您的喜好,想用那种都行 if(e.target.dataset.index==1){ // document.getElementById("newview").scrollIntoView({ // block: 'start', // behavior: 'smooth' //}) this.$refs.newview.scrollIntoView({ block: 'start', behavior: 'smooth'// 代表平滑滚动 }) } if(e.target.dataset.index==2){ document.getElementById("distory").scrollIntoView({ block: 'start', behavior: 'smooth' }) } if(e.target.dataset.index==3){ document.getElementById("turn").scrollIntoView({ block: 'start', behavior: 'smooth' }) } if(e.target.dataset.index==4){ document.getElementById("contantsend").scrollIntoView({ block: 'start', behavior: 'smooth' }) } console.log("触发事件",e.target.dataset.index); } } } </script>
整体代码
<template> <div> <div @click="dbclick"> <el-button :type="active=='1'?'primary':''" data-index="1">新建</el-button> <el-button :type="active=='2'?'primary':''" data-index="2">销毁</el-button> <el-button :type="active=='3'?'primary':''" data-index="3">转办</el-button> <el-button :type="active=='4'?'primary':''" data-index="4">发送</el-button> </div> <div class="height"> <div id="newview" ref="newview"> <span v-for="(item,index) in 50" :key="index" style="background:whitesmoke;">这是新建内容</span> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="distory"> <span v-for="(item,index) in 50" :key="index" style="background:yellowgreen;">这是销毁内容</span> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="turn"> <span v-for="(item,index) in 50" :key="index" style="background:pink;">这是转办内容</span> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="contantsend"> <span v-for="(item,index) in 50" :key="index" style="background:yellow;">这是发送内容</span> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> </template>
<script> export default { data() { return { active: "1" } }, methods: { dbclick(e) { this.active=e.target.dataset.index if(e.target.dataset.index==1){ this.$refs.newview.scrollIntoView({ block: 'start', behavior: 'smooth' }) } if(e.target.dataset.index==2){ document.getElementById("distory").scrollIntoView({ block: 'start', behavior: 'smooth' }) } if(e.target.dataset.index==3){ document.getElementById("turn").scrollIntoView({ block: 'start', behavior: 'smooth' }) } if(e.target.dataset.index==4){ document.getElementById("contantsend").scrollIntoView({ block: 'start', behavior: 'smooth' }) } console.log("触发事件",e.target.dataset.index); } } } </script>
<style lang="scss" scoped> .height{ width: 30%; height:500px; margin: auto; background-color: bisque; word-break: break-all; overflow-y: scroll; // 垂直方向滚动条 } </style>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
关于vue项目一直出现 sockjs-node/info?t=XX的解决办法
sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道,这篇文章主要介绍了vue项目一直出现 sockjs-node/info?t=XX的解决办法,需要的朋友可以参考下2023-12-12Vue Element 分组+多选+可搜索Select选择器实现示例
这篇文章主要介绍了Vue Element 分组+多选+可搜索Select选择器实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-07-07深入解析el-col-group强大且灵活的Element表格列组件
这篇文章主要为大家介绍了el-col-group强大且灵活的Element表格列组件深入解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-04-04element-ui中el-upload多文件一次性上传的实现
这篇文章主要介绍了element-ui中el-upload多文件一次性上传的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-12-12
最新评论