小程序外賣項目實踐之-左右菜單聯動
前言
本項目是公司之前一個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…