小程序外賣項目實踐之-左右菜單聯動 爲小程序開發建立本地mock數據服務器

前言

本項目是公司以前一個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

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

 

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

付上項目地址，有須要的本身拉：https://gitee.com/vbyzc/mz-wxmp

模擬數據是本地模擬，項目目錄下的mock目錄就是，看這裏：爲小程序開發建立本地mock數據服務器