uni-app 小项目开发 仿小米商城 前端开发4

实现

1. 点击商品跳转到详情页，详情页的搭建。
   
   

2. 详情页商品的数据选择和地址选择。

5. 购物车页面的搭建。
   

6. 用户页面的搭建。
   

实现方法

1.详情页的搭建。
详情页的布局为商品的图片展示，商品价格，商品信息，商品参数，选择商品和选择配送地址。
商品的图片展示采用的依旧是 swiper ，进行自动轮播。
商品的信息采用 list 格式进行展示。
商品的参数展示，首先用 scroll-view 在页面将商品的参数结合图标进行展示，点击时出现 uni-popup 弹出层展示商品参数的文字展示。
2.商品的选择
商品的选择在页面是 “已选” 部分，点击时出现弹出层进行选择，选择完成后将数据返回到 “已选” 部分。
3.地址的选择
地址选择的实现主要是借助 pickerAddress 插件进行实现，将地址返回到页面的 “送至” 部分。

源码

Github：Github：https://github.com/hrbust1914010305/uni-app-shop