前言

本專案是公司之前一個app專案，一個餐廳自己的訂餐app，已經下線了，

老衲是閒時用來練手，最早是html+jq版本，準備放在公從號裡的，後來先是用vue實現了它，最近研究下小程式，當然也是好的練手demo

vue有一個專案視訊教程叫實戰餓了麼，它裡面有講到選單聯動的，換在小程式裡面，思路也一樣，只不過細節不一樣

先上效果圖：

這裡有2個功能點：

• 點選左側分類標籤的時候，右邊滾動到相應的錨點（html中，確實可以用錨點，而當時就是這麼做的）
• 右邊滾動的時候，以頂部為點，滾動到哪個分類，左邊啟用（高亮效果）對應的標籤

基本思路

點左側右邊滾動到相應的位置

由於微信沒有錨點這東西，右邊商品列表使用的是scroll-view原生元件，只能設定它的scroll-top（滾動位置，和html一樣意思）

所以你可能已經想到辦法了，左邊有幾個分類標籤，右側就有幾個產品塊，例子中有3個分類，每個分類都有一個標題和若干個商品容器，我們把各分類商品的區間高度位置（標題高度 +商品容器高度*商品數量），放進一個陣列，陣列當然從0開始，因為初始滾動位置是0
當你點選左側標籤的時候，得到索引值，根據索引值，帶進區間高度的陣列，取得值，就是商品列表的scroll-top

右側滾動時，左側啟用相應標籤

滾動時，得到即時的scroll-top，帶進區間高度陣列，計算下在哪個位置，反回相應的索引值，用來判斷左側選單標籤是第幾個需要高亮

根據上面的草圖，假設我們三個分類，每個分類2個產品，得到的高度陣列就是[0,200,400,600]

假設我們滾動的時候，滾動到298畫素的位置，根據比對高度陣列，超過200，不超過400，應該返回陣列的索引：1

1就是第二個位置，也就是我們左側選單應該啟用高亮的第2個標籤

相關程式碼

根據上面的草圖的結果，本例中分類和商品容器為同級，且每個分類的商品容器為獨立容器，不再統一包裹在一個容器中

我們在onLoad事件中，載入商品資料，把商品資料賦值到data中的goods

注意此處：需要在在setData的回撥中，呼叫計算商品區間高度的方法，因為setData之後，渲染視訊是非同步的，所以必須在setData回撥中呼叫

下面是獲取商品各分類區間高度的方法，至於獲取檢視容器的程式碼直接搬來，不用解釋

下面是左側選單的檢視程式碼，根據計算出來的索引值，來實現高亮哪一個標籤
繫結一個點選事件

下面是點選左側選單標籤的時候，根據當點前擊的標籤的索引值，帶到區間高度陣列，賦值到data中的listViewScrollTop值，並且在滾動容器中scroll-top引數，繫結到這個值，就會滾動到對應的高度

給商品滾動容器繫結一個滾動事件， 滾動的時候，可得到當前滾動高度，比較當前高度在已計算出來的區間高度陣列中，是屬於哪個區間，返回對應索引值，賦值到data中的cateListActiveIndex

用於左側計算應該高亮哪個標籤

總結：思路上面已說明，貼程式碼是例常

附上專案地址，有需要的自己拉：gitee.com/vbyzc/mz-wx…

模擬資料是本地模擬，專案目錄下的mock目錄就是，看這裡：為小程式開發建立本地mock資料伺服器