後端寫前端不容易啊，一個界面因為相容性問題花了我一整天的時間！但是，好在最後查了各種資料，總算得到了一個還比較看得過去的頁面！
這個頁面其實就是一個“商品清單”和“購物車”的頁面。其中，商品的分類需要橫向在一行顯示，并且可以拖動。然後就是下方購物車，需要顯示商品數量、金額、運費等等資訊。最重要的是，點選下方購物車圖示，會從底部彈出一個已經購買的商品清單資訊。
目前我隻寫了這兩個功能，其他的其實都好加，但是這兩個功能我花了一天時間。
商品分類的導航欄花得時間比較少，因為是使用UniApp的scroll-view做的，這個元件是可滑動元件，寫好之後，我發現滾動條去不掉，使用官方Api裡面的參數隐藏也隐藏不掉，最後還是将webkit-scrollbar的display屬性設為none才解決。
至于“購物車”這個功能，我知道實作起來不容易，找了很多資料都沒有找到現成的案例，至于我手上的幾個AI給的代碼也是一塌糊塗。于是，我幹脆就決定自己做！
“購物車”的正常顯示部分比如說角标、金額、按鈕等等，我很快就寫完了，難點在點選“購物車”圖示，從下彈出一個商品清單這個功能！
我使用的是UniApp的擴充元件，叫做uni-popup。但是這個元件有個問題，就是喜歡從整個手機螢幕的底部鑽出來，這樣的話，就導緻了底部的導航欄以及購物車子產品全部被遮擋住了。
這個遮擋問題我研究了好久，走了很多彎路，最後使用z-index将購物車子產品直接置頂，這樣就不遮擋了。然後我又設定buttom的值，改為高出底部導航欄以及購物車子產品，最後成功解決問題。
但是，在H5調試界面顯示是沒有問題的，可是在手機上模拟運作時，我發現手機上的購物車子產品距離底部的導航欄好像高出了一個導航欄的距離！因為我設定的遮擋的buttom值是50px，且底部導航欄的高度正好是50px，是以，我感覺在H5上運作底部高度是沒有的，但是在手機上則是有高度的。
解決這個問題，就是使用var(--window-bottom)變量來設定底部距離，這樣就都相容了。
造輪子不易，看看成果吧！
#程式員# #計算機# #程式設計#
