标签：index vue target scrollIntoView dataset start 点击 block 页面
vue点击导航 页面自动滚动到特定位置
效果预览：
1.npm i element-ui -S
下载安装element组件库，导航我们使用element组件库中的样式，type="primary"刚好作为我们导航激活后的样式，省去了我们写样式的时间
2.到 main.js 文件中全局引入element组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3.代码实现：
<!-- 为每一个按钮 添加点击事件 用来作为按钮的切换 我们将所有的按钮导航装到
一个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>
5.整体代码
<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>
周周学习小技巧,一次不学就费料!
标签：index,vue,target,scrollIntoView,dataset,start,点击,block,页面 来源： https://blog.csdn.net/weixin_52767262/article/details/122870959
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。