vue點擊導航頁面實現(xiàn)自動滾動到特定位置

更新時間：2024年03月01日 09:07:49 作者：前端深造中

這篇文章主要介紹了vue點擊導航頁面實現(xiàn)自動滾動到特定位置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

效果預覽

在這里插入圖片描述

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);

代碼實現(xiàn)

<!-- 為每一個按鈕 添加點擊事件 用來作為按鈕的切換 我們將所有的按鈕導航裝到
    一個div中，給這個div添加點擊事件就可以了(不知道為什么的小伙伴可以去看一下事件冒泡)
    由于進入頁面要有默認激活項,我們將data屬性中的active賦值為1,就可以了，每次點擊，只需要通過
    訪問dataset中的屬性動態(tài)的賦值給active就可以實現(xiàn)切換啦
    -->
     <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">發(fā)送</el-button>
     </div>
<script>
    export default{
         data() {
      		return {    
        		active: "1"
     		}
   	 	},
    }
	
</script>

 <!-- 接下來我們定義內容展示部分,用一個大的盒子將其包裹,然后給與每一個子div不同的id,到后期我們會
     使用到,本人比較懶散，內容呢直接在這里循環(huán)了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;">這是發(fā)送內容</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("觸發(fā)事件",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">發(fā)送</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;">這是發(fā)送內容</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("觸發(fā)事件",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>