image

一.前言

文章主要以宏觀的形式來聊嗶哩嗶哩側(cè)邊導航拖拽組件胁编，非常適合正在漸進式學習VUE的你，適當?shù)哪７麻_發(fā)項目是前端學習必須要有的技能鳞尔。大多數(shù)人都知道的是，面試需要有自己的作品早直，而作品最重要的不是切頁面寥假，而是：<font face="黑體" color=red>創(chuàng)新+用戶體驗+性能優(yōu)化+技術展示</font> 。作者也是一個前端小白霞扬，正在摸索階段糕韧，我今天講解的是模仿我覺得做的不錯的側(cè)邊導航欄，希望大家有收獲喻圃。讓我們一起來萤彩，淡黃的長裙，蓬松的頭發(fā)斧拍，拽拽拽雀扶！

組件展示

這是一個模仿老版嗶哩嗶哩的側(cè)邊導航欄組件，部分效果如下圖：

image

根據(jù)效果圖可以看出，組件擁有以下功能：

1. 導航欄中的條目元素item可以進行拖拽愚墓，并且頁面專題結(jié)構同步改變予权。
2. 點擊任意條目元素item，可以立即到其對應的頁面位置浪册。
3. 當瀏覽頁面時扫腺，移動的某個專題時，旁邊的條目元素item也會與之對應村象。

二.具體講解

• 根據(jù)需求：本文將簡述對h5和css進行編寫笆环，重點是如何實現(xiàn)實時滾動導航和拖拽。

獲取專題名稱及其相關數(shù)據(jù)

1.首先我們要去vuex里面拿數(shù)據(jù)厚者，完成顯示專題名稱躁劣，拖拽等功能，需要sortValues籍救、sortKeys以及sortIds,vuex通過去請求嗶哩嗶哩官方提供的api進行拿取习绢。具體過程暫且忽略，部分代碼如下（因為這個是一個全棧項目蝙昙，而這個組件和其他組件的關聯(lián)程度最大闪萄，所以作者有點不好如何講解，還望多多諒解奇颠，文末將會附上guthub地址）：

import { contentApi, contentrankApi } from '@/api'
import * as TYPE from '../actionType/contentType' //采用actionType便于開發(fā)與管理

const state = {
   // 默認排序
   sortKeys: ['douga', 'bangumi', 'music', 'dance', 'game', 'technology', 'life', 'kichiku', 'fashion', 'ad', 'ent', 'movie', 'teleplay'],
   sortIds: [1, 13, 3, 129, 4, 36, 160, 119, 155, 165, 5, 23, 11],
   sortValues: ['動畫', '番劇', '音樂', '舞蹈', '游戲', '科技', '生活', '鬼畜', '時尚', '廣告', '娛樂', '電影', 'TV劇'],
   rows: [],
   ranks: [],
   rank: {}
}

const getters = {
   rows: state => state.rows,
   sortKeys: state => state.sortKeys,
   sortIds: state => state.sortIds,
   ranks: state => state.ranks,
   rank: state => state.rank,
   sortValues: state => state.sortValues
}

const actions = {
   getContentRows({commit, state, rootState}) {
       rootState.requesting = true
       commit(TYPE.CONTENT_REQUEST)
       contentApi.content().then((response) => {
           rootState.requesting = false
           commit(TYPE.CONTENT_SUCCESS, response)
       }, (error) => {
           rootState.requesting = false
           commit(TYPE.CONTENT_FAILURE)
       })
   },
   getContentRank({commit, state, rootState}, categoryId) {
       console.log(categoryId)
       rootState.requesting = true
       commit(TYPE.CONTENT_RANK_REQUEST)
       let param = {
           categoryId: categoryId
       }
       contentrankApi.contentrank(param).then((response) => {
           rootState.requesting = false
           if (categoryId === 1) {
               console.log(response)
           }
           commit(TYPE.CONTENT_RANK_SUCCESS, response)
       }, (error) => {
           rootState.requesting = false
           commit(TYPE.CONTENT_RANK_FAILURE)
       })
   }
}
const mutations = {
   [TYPE.CONTENT_REQUEST] (state) {

   },
   [TYPE.CONTENT_SUCCESS] (state, response) {
       for (let i = 0; i < state.sortKeys.length; i++) {
           let category = state.sortKeys[i] 
           let rowItem = {
               category: category,
               categoryId: state.sortIds[i],
               name: state.sortValues[i],
               b_id: `b_${category}`,
               item: Object.values(response[category])
           }
           state.rows.push(rowItem)
       }
       },
   [TYPE.CONTENT_FAILURE] (state) {

   },

   // 排行榜信息
   [TYPE.CONTENT_RANK_REQUEST] (state) {

   },
   [TYPE.CONTENT_RANK_SUCCESS] (state, response) {
       state.ranks.push(response)
       state.rank = response
   },
   [TYPE.CONTENT_RANK_FAILURE] (state) {
   
   }
}

export default {
   state,
   getters,
   actions,
   mutations
}

2. 接下來败去，我們要做的事情就是就是對數(shù)據(jù)進行初始化。作者先上代碼再來解釋烈拒，代碼如下：

import { mapGetters } from "vuex";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      current: 0, //當前選中條目的序號
      data: [], //數(shù)據(jù)(name,element,offsetTop,height)
      time: 800, //動畫時間
      height: 32, //單個元素的高度
      isSort: false, //排序模式
      scrollTop: 0, //距離頁面的頂部距離
      dragId: 0, //拖拽元素序號
      isDrag: false, //當前是否在拖拽
      offsetX: 0, //鼠標在要拖拽的元素上的X坐標上的偏移
      offsetY: 0, //鼠標在要拖拽的元素上的Y坐標上的偏移
      x: 0, //被拖拽的元素在其相對的元素上的X坐標上的偏移
      y: 0 //被拖拽的元素在其相對的元素上的Y坐標上的偏移
    };
  },

首先我們將所有我們實現(xiàn)需求所需的數(shù)據(jù)圆裕，全部簡單初始化寫在data,如我們需要實現(xiàn)頁面滾動時條目跟隨專題，就需要獲取這個條目的序號荆几，名字吓妆，元素以及距離頁面頂部的高度等等。要實現(xiàn)可以把條目進行拖拽吨铸，就需要獲取是否參與拖拽狀態(tài)行拢，正在拖拽哪一個條目，所有需要獲取拖拽的條目序號以及鼠標的一些數(shù)據(jù)诞吱。

僅僅向上面這樣初始化數(shù)據(jù)是遠遠不夠的舟奠，要實現(xiàn)需求就必須在兼容所有瀏覽器的情況下，獲取整個網(wǎng)頁的大小寬高數(shù)據(jù)以及對鼠標的操作有著實時的監(jiān)聽房维。作者先上代碼：

methods: {
    /** 初始化 */
    init() {
      this.initData(); //初始化
      this.bindEvent();
      this._screenHeight = window.screen.availHeight; //返回當前屏幕高度(空白空間) 
      this._left = this.$refs.list.getBoundingClientRect().left;//方法返回元素的大小及其相對于視口的位置沼瘫。
      this._top = this.$refs.list.getBoundingClientRect().top;
    },
    /** 綁定事件 */
    bindEvent() {
      document.addEventListener("scroll", this.scroll, false);
      document.addEventListener("mousemove", this.dragMove, false);//當指針設備( 通常指鼠標 )在元素上移動時, mousemove 事件被觸發(fā)。
      document.addEventListener("mouseup", this.dragEnd, false);//事件在指針設備按鈕抬起時觸發(fā)咙俩。
      document.addEventListener("mouseleave", this.dragEnd, false);//指點設備（通常是鼠標）的指針移出某個元素時耿戚，會觸發(fā)mouseleave事件。
      //mouseleave  和 mouseout 是相似的，但是兩者的不同在于mouseleave 不會冒泡而mouseout 會冒泡溅话。
      //這意味著當指針離開元素及其所有后代時晓锻，會觸發(fā)mouseleave，而當指針離開元素或離開元素的后代（即使指針仍在元素內(nèi)）時飞几，會觸發(fā)mouseout砚哆。
    },
    /** 初始化data */
    initData() {
      //將this.options.items轉(zhuǎn)化成新的數(shù)組this.data
      this.data = Array.from(this.options.items, item => {
        let element = document.getElementById(item.b_id);
        if (!element) {
          console.error(`can not find element of name is ${item.b_id}`);
          return;
        }
        let offsetTop = this.getOffsetTop(element);
        return {
          name: item.name,
          element: element,
          offsetTop: offsetTop,//返回當前元素相對于其 offsetParent 元素的頂部的距離。
          height: element.offsetHeight//它返回該元素的像素高度屑墨，高度包含該元素的垂直內(nèi)邊距和邊框躁锁，且是一個整數(shù)。
        };
      });
    },
    //獲取元素距離頂部的距離
    getOffsetTop(element) {
      let top,
        clientTop,
        clientLeft,
        scrollTop,
        scrollLeft,
        doc = document.documentElement,//返回元素
        body = document.body;
      if (typeof element.getBoundingClientRect !== "undefined") {
        top = element.getBoundingClientRect().top;
      } else {
        top = 0;
      }
      clientTop = doc.clientTop || body.clientTop || 0;//表示一個元素的上邊框的寬度.boder
      scrollTop = window.pageYOffset || doc.scrollTop;//返回當前頁面相對于窗口顯示區(qū)左上角的 Y 位置卵史。瀏覽器兼容
      return top + scrollTop - clientTop;
    },
   }

• init()：在瀏覽器中打開可能是全屏或者是小窗战转，此時頁面的大小高度都會改變，我們必須每次當瀏覽器窗口大小變化時以躯，重新獲然毖怼（初始化），當前屏幕的高度以及每個條目元素相對窗口的位置忧设，只有這樣才可以在不同的情況下刁标，也不出錯，實時變化址晕。使用screen.availHeight.availHeight獲取屏幕高度膀懈，使用getBoundingClientRect()方法來獲取條目元素相對于視窗的位置，如下圖所示谨垃。

image

• bindEvent()：這個方法里面寫了對鼠標操作以及滾動的行為進行事件綁定启搂，也可說監(jiān)聽，這是實現(xiàn)實時變化的關鍵刘陶。這個方法里面我要特別說一下的是我們使用mouseleave胳赌，而不使用mouseout,的原因是我們需要實現(xiàn)進行拖拽時，當條目元素脫出側(cè)邊欄匙隔，這個元素將不會顯示了(下面將放上展示動圖)疑苫，因為觸發(fā)了mouseleave，這個方法是當鼠標離開其父組件時觸發(fā)牡直。不使用mouseout是因為這個方法離開元素自己的位置就會觸發(fā)離開其父級元素的時候也會觸發(fā)，是冒泡觸發(fā)的纳决。這里我們使用一定要準確碰逸，如果你還是有點不理解，可以去試試MDN上的對比演示demo演示demo文檔阔加。

image

• initData(): 將this.options.items轉(zhuǎn)化成新的數(shù)組this.data,返回名字饵史、元素本身、元素相對于其 offsetParent 元素的頂部的距離以及該元素的像素高度，高度包含該元素的垂直內(nèi)邊距和邊框胳喷。

• getOffsetTop（）：獲取條目元素距離頂部的距離湃番，這里作者不過多講解推薦一篇文章JavaScript之scrollTop、scrollHeight吭露、offsetTop吠撮、offsetHeight等屬性學習筆記。需要講解的是return top + scrollTop - clientTop;元素本身的高度加上滾動增加的高度減去一個重復的上邊框高度才是實際的元素的高度讲竿。

3. 現(xiàn)在我們就要開始實現(xiàn)第一個功能泥兰，點擊條目元素，網(wǎng)頁移動到對應的位置题禀，我們要實現(xiàn)這個功能很容易鞋诗，只要獲取對應條目元素的位置和index就可以實現(xiàn)，但是要實現(xiàn)平滑的滾動需要引入smooth-scroll.js代碼如下：

        <div
          class="n-i sotrable"
          :class="[{'on': current===index && !isSort}, {'drag': isDrag && current === index}]"
          @click="setEnable(index)"
          @mousedown="dragStart($event, index)"
          :style="dragStyles"
          :key="index"
        >
          <div class="name">{{item.name}}</div>
        </div>
        
         <div class="btn_gotop" @click="scrollToTop(time)"></div>
         
         
    setEnable(index) {
      if (index === this.current) {
        return false;
      }
      this.current = index;
      let target = this.data[index].element;
      this.scrollToElem(target, this.time, this.offset || 0).then(() => {});
    },

smooth-scroll.js

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame

const Quad_easeIn = (t, b, c, d) => c * ((t = t / d - 1) * t * t + 1) + b

const scrollTo = (end, time = 800) => {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop
    let b = scrollTop
    let c = end - b
    let d = time
    let start = null

    return new Promise((resolve, reject) => {
        function step(timeStamp) {
            if (start === null) start = timeStamp
            let progress = timeStamp - start
            if (progress < time) {
                let st = Quad_easeIn(progress, b, c, d)
                document.body.scrollTop = st
                document.documentElement.scrollTop = st
                window.requestAnimationFrame(step)
            }
            else {
                document.body.scrollTop = end
                document.documentElement.scrollTop = end
                resolve(end)
            }
        }
        window.requestAnimationFrame(step)
    })
}

const scrollToTop = (time) => {
    time = typeof time === 'number' ? time : 800
    return scrollTo(0, time)
}

const scrollToElem = (elem, time, offset) => {
    let top = elem.getBoundingClientRect().top  + ( window.pageYOffset || document.documentElement.scrollTop )  - ( document.documentElement.clientTop || 0 )
    return scrollTo(top - (offset || 0), time)
}

export default {
    methods: {
        scrollToTop,
        scrollToElem,
        scrollTo
    }
}

關于smooth-scroll.js,作者推薦自己查一下資料迈嘹，有比較多削彬。

4. 實現(xiàn)頁面滾動時條目元素跟隨對應，代碼如下：

     //  偏移值
    offset() {
      return this.options.offset || 100;
    },
     /** 滾動事件 */
    scroll(e) {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop + document.body.scrollTop;//瀏覽器兼容秀仲，返回當前頁面相對于窗口顯示區(qū)左上角的 Y 位置
      if (this.scrollTop >= 300) {
        this.$refs.navSide.style.top = "0px";
        this.init();
      } else {
        this.$refs.navSide.style.top = "240px";
        this.init();
      }
      // console.log("距離頂部" + this.scrollTop);
      //實時跟蹤頁面滾動
      for (let i = 0; i < this.data.length; i++) {
        if (this.scrollTop >= this.data[i].offsetTop - this.offset) {
          this.current = i;
        }
      }
    },

這里我們可以看到融痛，我們使用了初始化里面的數(shù)據(jù)，然后滾動的關鍵就是獲得元素到窗口的距離以及偏移值啄育。需要注意的一個細節(jié)是滾動時元素與窗口頂部的距離大于300px時酌心，整個組件將吸頂。

5. 實現(xiàn)拖拽

1. 進入排序模式

  <div class="nav-side" :class="{customizing: isSort}" ref="navSide">  <!--默認不進行排序-->
    <transition name="fade">
      <div v-if="isSort">
        <div class="tip"></div>
        <div class="custom-bg"></div>
      </div>
    </transition>
 </div>
 //進入排序模式
    sort() {
      this.isSort = !this.isSort;
      this.$emit("change");
    },
    
    .fade-enter-actice, .fade-leave-active {
    transition: opacity 0.3s;
  }
  
  .fade-enter, .fade-leave-active {
    .tip {
      top: 50px;
      opacity: 0;
    }

    .custom-bg {
      top: 150px;
      left: -70px;
      height: 100px;
      width: 100px;
      opacity: 0;
    }
  }
}

通過上面的代碼可知挑豌，進入排序模式的代碼比較簡單安券，主要是由css的動畫來實現(xiàn)。

2.開始拖拽

/** 得到鼠標位置 */
    getPos(e) {
      this.x = e.clientX - this._left - this.offsetX;
      this.y = e.clientY - this._top - this.offsetY;
    },
/** 拖拽開始 */
    dragStart(e, i) {
      if (!this.isSort) return false;
      this.current = i;
      this.isDrag = true;
      this.dragId = i;
      this.offsetX = e.offsetX;
      this.offsetY = e.offsetY;
      this.getPos(e);
    },

開始拖拽時氓英，需要判斷是否進入了排序侯勉，進入了才允許可以進行拖拽，此時獲得鼠標選中的位置铝阐，元素的位置以及對應id址貌。

3.拖拽中

<template v-for="(item, index) in data" >
        <div
          v-if="isDrag && index === replaceItem && replaceItem <= dragId"
          class="n-i sotrable"
          :key="item.name"
        >
          <div class="name"></div>
        </div>
        <div
          class="n-i sotrable"
          :class="[{'on': current===index && !isSort}, {'drag': isDrag && current === index}]"
          @click="setEnable(index)"
          @mousedown="dragStart($event, index)"
          :style="dragStyles"
          :key="index"
        >
          <div class="name">{{item.name}}</div>
        </div>
        <div
          v-if="isDrag && index === replaceItem && replaceItem > dragId"
          class="n-i sotrable"
          :key="item.name"
        >
          <div class="name"></div>
        </div>
</template>
      
      
    // 拖拽的元素的position會變?yōu)閍bsolute,dragStyles用來設置其位置,鼠標運動時會調(diào)用,從而實現(xiàn)跟隨鼠標運動
    dragStyles() {
      return {
        left: `${this.x}px`,
        top: `${this.y}px`
      };
    },
    //當被拖拽的元素運動到其他元素的位置時,會使得replaceItem發(fā)送變化
    replaceItem() {
      let id = Math.floor(this.y / this.height);
      if (id > this.data.length - 1) id = this.data.length;
      if (id < 0) id = 0;
      return id;
    }
    
     /** 拖拽中 */
    dragMove(e) {
      if (this.isDrag) {
        this.getPos(e);
      }
      e.preventDefault();//該方法將通知 Web 瀏覽器不要執(zhí)行與事件關聯(lián)的默認動作（如果存在這樣的動作）
    },

進入拖拽時，首要的是判斷是否獲取了要拖拽元素的鼠標位置徘键，如果沒有獲取到练对，將無法進行拖拽，則使用e.preventDefault()通知瀏覽器不進行拖拽吹害。然后使用dragStyles()獲取元素拖拽的實時位置螟凭。最后元素拖拽時會改變其他元素的位置，位置改變了它呀，其對應的id就會發(fā)生變化螺男，我們通過replaceItem()來實現(xiàn)棒厘，在這個方法里面，我們奇妙的利用元素的實時高度與元素本身的高度相除獲得動態(tài)的id下隧。

4. 拖拽完成

    /** 拖拽結(jié)束 */
    dragEnd(e) {
      if (this.isDrag) {
        this.isDrag = false;
        if (this.replaceItem !== this.dragId) {
          this.options.items.splice(
            this.replaceItem,
            0,
            this.options.items.splice(this.dragId, 1)[0]
          );
        } else {
          this.setEnable(this.dragId, true);
        }

這段代碼巧妙的是奢人，首先判斷是否還在進行拖拽如果有，則this.isDrag = false;停止拖拽淆院，接著就是核心部分巧妙利用splice,如果this.replaceItem !== this.dragId,則在this.replaceItem后面添加this.options.items.splice(this.dragId, 1)[0],即這個拖拽元素初始id,相當于拖拽不成功何乎，回到原來的位置，否則拖拽成功迫筑。下面我用動圖來演示一下宪赶。

image

最后今天是清明節(jié)，也是我們深切悼念新冠肺炎疫情犧牲的烈士和逝世同胞的日子脯燃，把網(wǎng)站變灰搂妻。

在全局中加上如下css就好，代碼如下辕棚，參考文章tuitui

  #app 
    filter grayscale(100%)
    -webkit-filter grayscale(100%)
    -moz-filter grayscale(100%)
    -ms-filter grayscale(100%)
    -o-filter grayscale(100%)
    filter url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale")
    filter progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
    -webkit-filter: grayscale(1)

效果圖：

image

結(jié)束

文章看到現(xiàn)在也結(jié)束啦欲主，如果有錯誤的話就麻煩大家給我指出來吧！如果覺得不錯的話別忘了點個贊??再走噢逝嚎！

最后附上Github地址

• 源碼地址：bilibili

個人博客地址

• 博客地址：小小洋的博客

期待

• 作者大三正在尋找春招實習中扁瓢，期待大佬的青睞~