最近做小程序的時候，產(chǎn)品提了一個需求：

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

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

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

如圖

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

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

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

左側(cè)的部分基本代碼實現(xiàn)：

左側(cè)菜單

右側(cè)的代碼基本實現(xiàn)：

右側(cè)

接下來是JS部分

思路：

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

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

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

左側(cè)點擊事件

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

右側(cè)滾動實現(xiàn)

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

總結

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。