最近做小程序的時候，產品提了一個需求：

1.左側的菜單欄和右側的菜單可分別滾動，滾動左側不影響右側，滾動右側左側隨之聯動高亮顯示所在的菜單分類。

2.點擊下方左側導航菜單欄，高亮顯示被點擊的菜單分類，右側分類類別滾動到右側頂部(類似于 HTML 里的錨點功能)。

3.滾動右側菜品分類詳情時，當該分類詳情模塊頂部接觸到滾動區域的頂部，左側對應的導航菜單欄高亮，并且顯示在可視區域。

如圖

因為之前用vue做過一次這個效果，用了better-scroll，在小程序中不支持。于是上網開始找資料。

過程踩了很多坑，這里不一一說了，直接說實現(PS：我用的是mpvue框架)：

html部分：使用scroll-view組件，不了解的可以去看官方文檔scroll-view

左側的部分基本代碼實現：

左側菜單

右側的代碼基本實現：

右側

接下來是JS部分

思路：

1.首先獲取左側的菜單和右側的分類類別的高度，使用wx.createSelectorQuery().selectAll

2.將右邊的每個類別的高度獲取后，將高度累加，形成一個區間

3.左側點擊實現，利用scroll-into-view實現類似于錨點的效果，然后利用scroll-top的屬性是左側高亮的部分始終保持在視圖區。因為scroll-into-view會引起右邊的滑動，所以利用checkFlag限制右側的scroll事件函數的執行。

左側點擊事件

4.右側的實現，如上所說，利用checkFlag限制右側的scroll事件函數的執行。然后進入循環，根據scroll事件里面的scrollTop的高度與獲取的右側分類的高度區間的值進行比對，記錄index的值，然后高亮顯示左側，并且左側上滑對應的距離，保證左側高亮在可視區域。

右側滾動實現

以上是左右聯動的基本實現，如有bug和可以改進的地方，敬請指正，不勝感激！

總結

以上是生活随笔為你收集整理的html锚点反向联动,小程序菜单左右联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。