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

本章我们开始讲购物车结算页面的编写,这个页面应该是整个项目里最复杂的页面了,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组件实现地址选择功能,然后我们在返回到这个页面来完成我们剩下的功能。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

前端三大框架比较Angularreactvue

13120
来自专栏IMWeb前端团队

可视化前端测试

可视化前端测 背景 相信进行过前端开发的同学都知道,前端测试不仅仅涉及到功能的测试,而且也需要考虑到界面样式测试、多浏览器兼容性测试、性能测试。本文主要讨论分...

349100
来自专栏web前端教室

本周先行者课程--多级下拉菜单回顾

各位同学们大家好,又到周末了。这个周末咱们开始讲新的前端组件,多级下拉菜单。这个东西我们以前讲过一次,但因为感觉之前讲的有些不太充分,还是把它再拿出来讲一下。 ...

28980
来自专栏编程微刊

如何快速修改网页上的文字?

22540
来自专栏ThoughtWorks

CSS-in-JS,向Web组件化再迈一大步 | 洞见

简介 CSS-in-JS是什么,看到这个词就能大概猜到是在JavaScript里写CSS,那为什么要在JavaScript里写CSS呢,像之前一样写在css文件...

32180
来自专栏ytkah

如何设置dedecms自定义表单必填项?

  用dedecms自定义表单可以制作一个简单的预约系统,有些相关信息需要设置为必填项,比如联系方式,没有留下真实的电话或其他信息,以后要怎么联系到你的客户。那...

31760
来自专栏腾讯IVWEB团队的专栏

概览:可视化前端测试

做过前端开发的同学都知道,前端测试不仅仅涉及到功能的测试,而且也需要考虑到界面样式测试、多浏览器兼容性测试、性能测试。本文主要讨论分析目前前端测试的现状,并讨论...

53100
来自专栏微信小程序开发

微信小程序开发应该注意的问题

小程序是微信主推的产品,现在也有不少公司的产品已经开发了小程序版本。那么,开发小程序你需要了解哪些知识? 1、使用微信web开发者工具 此工具是微信官方提供的小...

30980
来自专栏web前端教室

MVVM - 遇见未来

MVVM是新的前端开发模式,它的全称是Model View ViewModel,据说最初是由微软提出来的,。。 这种模式的实现,大意上是用自定义的标签把数据绑定...

21370
来自专栏菩提树下的杨过

jQuery中排除指定元素,同时选择剩下的所有元素

场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,j...

25650

扫码关注云+社区

领取腾讯云代金券