仿美團外賣的店鋪列表獲取思路

這一篇隨筆主要用來說解和記錄我對一個問題的解決思路。

首先我來說解下遇到的問題，在開發一個外賣uni-app的過程當中，我碰到了一個問題，店鋪頁面商品實現懶加載和列表動態切換，實現和美團，餓了麼同樣的效果，並在這個基礎上給予動態效果，大體設計以下圖：

 

 在作這個頁面功能的時候，我首先是要解左側列表框和右側產品框的協調問題，下面分享個人思路，

左側列表框思路：

初始：在初始化接口時，須要後臺把全部的左側列表數據和店鋪數據返回出來給我，我這裏作一個數據的初始化，定義一個全局變量，初始值爲0，定義一個暫存數據arr，初始值爲【】。

處理：在初始化結束後，顯示數據。

右側處理完後：全局獲取view標籤的上邊距，標給左側欄的一個值（top）,若是沒有獲取到view的，表明還未獲取，賦值爲0

點擊時：判斷這一列的top是否爲0，若是是，根據右側列表初始化的思路再去拿20個，拿完後執行上方步驟，完成後再判斷，直到有top，賦值有右側來進行動態滑動

右側滑動時

右側列表框思路：

初始化：在左側列表框獲取結束後，全局定義的變量爲0，我以這個爲下標，能夠拿到第一列列表的id，根據這個id去後臺獲取商品，商品返回後判斷是否夠20個，若是夠，就進行數據處理，若是不夠，全局下標+1，數據暫存到全局暫存arr中，繼續範圍後臺去拿下一個列表的商品，直到夠20個或獲取到所有列表的商品爲止。

數據處理：根據返回的數據，循環後能夠找到是哪一個下標的商品，直接添加到左側列表的數據中，顯示出來。

滑動時：這裏滑動時有一個誤區，滑動時判斷外層的滑動位置，再與右側進行比對，當值大於前一個小於下一個時，判斷爲前一個標籤的下標，給予左側效果。

滑動到底部時：判斷全局下標是否爲最後一列，沒有的話根據初始化的思路來拿下20個，處理後顯示出來。

這一套思路完成後，你的頁面效果能夠和基本和美團，餓了麼同樣，若是對你有什麼幫助，請點個推薦，謝謝。