vue点击导航 页面自动滚动到特定位置

本文主要是介绍vue点击导航 页面自动滚动到特定位置，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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>

周周学习小技巧,一次不学就费料!

这篇关于vue点击导航 页面自动滚动到特定位置的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！