28、购物车结算页面-导航栏与地址选择布局

简介: 本章我们开始讲购物车结算页面的编写,这个页面应该是整个项目里最复杂的页面了,ok,这章讲下基本结构。Github:https://github.com/Ewall1106/mall(请选择分支chapter28)1、新建购物车页面(1)老规矩,复制一份我们已经写好的test.vue页面初始化我们购物车页面cart.vue购物车页面构建(2)然后就是去注册下路由这里就不废话了占据篇幅了,这个应该很easy了。

本章我们开始讲购物车结算页面的编写,这个页面应该是整个项目里最复杂的页面了,ok,这章讲下基本结构。
Github:https://github.com/Ewall1106/mall(请选择分支chapter28)

1、新建购物车页面

(1)老规矩,复制一份我们已经写好的test.vue页面初始化我们购物车页面cart.vue

img_156226a8184c6070847ec01150505416.png
购物车页面构建

(2)然后就是去注册下路由

  • 这里就不废话了占据篇幅了,这个应该很easy了。

2、顶部导航栏

(1)顶部的第一个块就是导航栏了,跟前面的一样,没什么难点的了。

img_ae9d52c4d9340ce98c93bd52ca271539.png
导航栏

然后就是添加几个前进后退的事件,我这里就直接复制前面章节中商品详情页里的头部了,其实,这里你也可以把部分抽离成一个组件从而实现复用,我就懒得抽了。

3、收货地址块

(1)重点说下收货地址这部分内容的实现,首先快速写下html和css完成基本布局:

img_7f1c50981a2cb7311138cb3f5f71cd25.png
收货地址

css就是一些简单的flex布局阿里巴巴icon-font的运用,不贴代码了。完成的基本效果:

img_51318e2219b3d94566ba1759771b4ddf.png
基本头部效果

(2)然后我们需要跳转到一个新页面完成地址选择功能,所以我们再新建一个address.vue页面

  • 同上,复制一份我们test.vue重命名为address作为我们的地址选择页面;
  • 注册路由

4、小结

这章就是完成了购物车结算页面的部分布局,下一章我们去adress.vue中借助vant组件实现地址选择功能,然后我们在返回到这个页面来完成我们剩下的功能。

目录
相关文章
|
7月前
|
前端开发 JavaScript
制作简易导航栏,思路明细
制作简易导航栏,思路明细
|
7月前
|
BI
宜搭流程表单报表的表格内如何设置点击跳转到表单的详情页面
宜搭流程表单报表的表格内如何设置点击跳转到表单的详情页面
776 0
|
3月前
|
移动开发
H5页面及店铺分享带图简介
H5页面及店铺分享带图简介
|
7月前
|
JavaScript
首页功能的实现
首页功能的实现。
45 1
|
开发者
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
273 0
|
SQL 前端开发 测试技术
显示勾选的购物车数据【项目 商城】
显示勾选的购物车数据【项目 商城】
75 0
|
SQL 存储 前端开发
显示购物车列表【项目 商城】
显示购物车列表【项目 商城】
131 0
|
小程序 JavaScript
微信小程序商品筛选,侧方弹出动画选择页面
微信小程序商品筛选,侧方弹出动画选择页面
195 0
|
小程序 开发者 iOS开发
【 uniapp - 黑马优购 | 商品详情 】详情页UI结构设计、商品导航区域实现
【 uniapp - 黑马优购 | 商品详情 】详情页UI结构设计、商品导航区域实现
360 0
|
XML JSON 缓存
1688商品详情页面通常包括什么
1688是一家知名的B2B电子商务平台,为国内外企业提供采购、外贸、批发等服务。在1688平台上,有大量丰富多彩的商品,每一个商品都有自己独特的商品详情页面。
173 0