前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >39、完成购物车页面

39、完成购物车页面

作者头像
Ewall
发布2018-12-06 16:52:27
1.4K0
发布2018-12-06 16:52:27
举报
文章被收录于专栏:vue学习vue学习

前言:很久没有更新这个项目了,加快进度,今天把购物车页面完成,然后下两章把前端方面的工作基本都做完,开始讲node后端数据库方面的知识点。 GitHub:https://github.com/Ewall1106/mall

1、商品列表

  • 顶部导航栏的收货地址这里的内容前面都已经说过了,下面的商品列表部分我们还是借助vant中的Card卡片组件来实现这方面的功能。
  • 首先当然是引入之类的功能罗,这里就不说了,前面已经讲得很透彻了,使用起来也很简单,我就简单贴个代码:

cart组件的运用

2、商品总额及支付按钮

  • 这里的商品总额就是一些简单的布局和样式了。

商品总额及支付按钮

小结

  • 首先我们来看一看购物车的一个简单效果:

购物车的简单效果

  • 效果就是上图中的这个样子了,先把页面做出来,后续功能在写前后端交互的时候一并处理。这章就先这样,下章把"个人中心"页面做完,我们就开始讲nodemongodb数据库。
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.10.29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、商品列表
  • 2、商品总额及支付按钮
  • 小结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档