vue 項目目錄錨點滑動 雙向綁定

需求 : 滾動內容爲左右佈局的右邊內容欄內,內容滾動 左邊 定位 右邊內容滾動。

            目錄有父子節點 (大目錄下的小目錄)

 

步驟:

1、設置左邊數據目錄 

2、在mounted中 this.$next() 函數 獲取父節點 及子節點的位置 生成數組對象  scrollTopList 與左邊菜單目錄一一對應

步驟

  1、點擊左邊目錄 傳遞點擊的父集index子index  

   根據對應的index 取出 獲取到scrollTopList 對應的 數據 (此數據就是滾動數據)

  設置頁面滑動距離  document.getElement.('').scrollTop =  滾動數據

2、滑動右邊內容設置左邊高亮

  遍歷 scrollTopList 將滑動距離進行比較  

  判斷在哪個區間 並返回對應的父index子index

   易錯點 : 1、父集【i】.高度< SCROLLtOP  && 父集【i+1】.高度     i+1< 父集的長度               

                    2、子集中最後一項與第二父集比較 返回 子集的index 

                  

根據對應的父子集Index  去設置對應左邊欄的高亮 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章