为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 28、购物车结算页面-导航栏与地址选择布局

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

2018.09.18 16:39 3322浏览

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

###1、新建购物车页面

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

购物车页面构建

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

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

###2、顶部导航栏

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

导航栏

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

###3、收货地址块

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

收货地址

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

基本头部效果

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

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

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

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
7092
获赞与收藏
265

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消