后端写前端不容易啊，一个界面因为兼容性问题花了我一整天的时间！但是，好在最后查了各种资料，总算得到了一个还比较看得过去的页面！
这个页面其实就是一个“商品列表”和“购物车”的页面。其中，商品的分类需要横向在一行显示，并且可以拖动。然后就是下方购物车，需要显示商品数量、金额、运费等等信息。最重要的是，点击下方购物车图标，会从底部弹出一个已经购买的商品列表信息。
目前我只写了这两个功能，其他的其实都好加，但是这两个功能我花了一天时间。
商品分类的导航栏花得时间比较少，因为是使用UniApp的scroll-view做的，这个组件是可滑动组件，写好之后，我发现滚动条去不掉，使用官方Api里面的参数隐藏也隐藏不掉，最后还是将webkit-scrollbar的display属性设为none才解决。
至于“购物车”这个功能，我知道实现起来不容易，找了很多资料都没有找到现成的案例，至于我手上的几个AI给的代码也是一塌糊涂。于是，我干脆就决定自己做！
“购物车”的正常显示部分比如说角标、金额、按钮等等，我很快就写完了，难点在点击“购物车”图标，从下弹出一个商品列表这个功能！
我使用的是UniApp的扩展组件，叫做uni-popup。但是这个组件有个问题，就是喜欢从整个手机屏幕的底部钻出来，这样的话，就导致了底部的导航栏以及购物车模块全部被遮挡住了。
这个遮挡问题我研究了好久，走了很多弯路，最后使用z-index将购物车模块直接置顶，这样就不遮挡了。然后我又设置buttom的值，改为高出底部导航栏以及购物车模块，最后成功解决问题。
但是，在H5调试界面显示是没有问题的，可是在手机上模拟运行时，我发现手机上的购物车模块距离底部的导航栏好像高出了一个导航栏的距离！因为我设置的遮挡的buttom值是50px，且底部导航栏的高度正好是50px，所以，我感觉在H5上运行底部高度是没有的，但是在手机上则是有高度的。
解决这个问题，就是使用var(--window-bottom)变量来设置底部距离，这样就都兼容了。
造轮子不易，看看成果吧！
#程序员# #计算机# #编程#
