這一篇隨筆主要用來講解和記錄我對一個問題的解決思路。
首先我來講解下遇到的問題，在開發一個外賣uni-app的過程中，我碰到了一個問題，店鋪頁面商品實現懶加載和列表動態切換，實現和美團，餓了么一樣的效果，並在這個基礎上給予動態效果，大致設計如下圖：
在做這個頁面功能的時候，我首先是要解左側列表框和右側產品框的協調問題，下面分享我的思路，
左側列表框思路：
初始：在初始化接口時，需要后台把所有的左側列表數據和店鋪數據返回出來給我，我這里做一個數據的初始化，定義一個全局變量，初始值為0，定義一個暫存數據arr，初始值為【】。
處理：在初始化結束后，顯示數據。
右側處理完后：全局獲取view標簽的上邊距，標給左側欄的一個值（top）,如果沒有獲取到view的，代表還未獲取，賦值為0
點擊時：判斷這一列的top是否為0，如果是，根據右側列表初始化的思路再去拿20個，拿完后執行上方步驟，完成后再判斷，直到有top，賦值有右側來進行動態滑動
右側滑動時
右側列表框思路：
初始化：在左側列表框獲取結束后，全局定義的變量為0，我以這個為下標，可以拿到第一列列表的id，根據這個id去后台獲取商品，商品返回后判斷是否夠20個，如果夠，就進行數據處理，如果不夠，全局下標+1，數據暫存到全局暫存arr中，繼續范圍后台去拿下一個列表的商品，直到夠20個或獲取到全部列表的商品為止。
數據處理：根據返回的數據，循環后可以找到是哪個下標的商品，直接添加到左側列表的數據中，顯示出來。
滑動時：這里滑動時有一個誤區，滑動時判斷外層的滑動位置，再與右側進行比對，當值大於前一個小於下一個時，判斷為前一個標簽的下標，給予左側效果。
滑動到底部時：判斷全局下標是否為最后一列，沒有的話根據初始化的思路來拿下20個，處理后顯示出來。
這一套思路完成后，你的頁面效果可以和基本和美團，餓了么一樣，如果對你有什么幫助，請點個推薦，謝謝。