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