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

39、完成购物车页面

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

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

1、商品列表

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

cart组件的运用

2、商品总额及支付按钮

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

商品总额及支付按钮

小结

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

购物车的简单效果

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
28、购物车结算页面-导航栏与地址选择布局
(1)老规矩,复制一份我们已经写好的test.vue页面初始化我们购物车页面cart.vue
Ewall
2018/09/30
2.1K0
28、购物车结算页面-导航栏与地址选择布局
微信小程序之购物车的交互场景
        JavaScript是小程序编程中的基础语言,JavaScript代码大约占整个小程序项目一半的代码量。全局文件app.js和所有的页面js文件都是由JavaScript来编写的,JavaScript代码主要实现业务逻辑处理和用户交互两方面的作用。
淼学派对
2022/11/20
8220
微信小程序之购物车的交互场景
Vue(9)购物车练习
需求:使用vue写一个表单页面,页面上有购买的数量,点击按钮+或者-,可以增加或减少购物车的数量,数量最少不得少于0,点击移除按钮,会移除该商品,当把所有的商品移除后,页面上的表单消失,然后出现文字:购物车为空,表单下方是商品的总价格,随着商品的数量增加而增加,默认是0元,总体效果如下:
全栈程序员站长
2022/09/16
6250
Vue(9)购物车练习
20、分类详情页之数据渲染
然后复制一系列就是我们左侧栏的各个标题了,记住这里的每个标题的id要和首页各个分类名的id相对应。
Ewall
2018/09/04
1K0
20、分类详情页之数据渲染
31、地址新增 — 定义数据结构与获取方式
(1)让我们进入addressEdit.vue页面填写一条地址,ok,现在假设你已经填写完毕。 (2)这个时候我们点击保存按钮且应该为这个按钮添加一个save事件,通过官方文档可知,我们可以通过这个事件获取填写表单的内容。
Ewall
2018/09/30
9060
31、地址新增 — 定义数据结构与获取方式
27、有赞Vant组件库的引入及轮播图片预览的实现②
这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可:
Ewall
2018/09/30
2.7K0
27、有赞Vant组件库的引入及轮播图片预览的实现②
购物车原理以及实现
可以看到,购物车这样一个功能模块,在各种购物类APP或者web应用中绝对是必不可少的东西.不论在大学中的课程设计,还是在实际的项目开发中,绝对非常重要且有些复杂的内容. 在实际操作中,身边有很多的小伙伴遇到编写购物车的代码的时候,有时候真的是一脸懵逼,总是搞不明白设计的思路,这就是本文写作的原因. 所以,本文适合搞不清楚购物车实现原理,知道原理但是实际编码不知道如何下手的小伙伴,我将给出一个思路以及实际的代码供大家参考. 在本文中,我将会用尽可能简单的句子,表达出我想表达的意思.废话不多说,开始我们的购物车实战!
roobtyan
2019/02/21
6.4K0
购物车原理以及实现
40、个人中心页面
前言:本章把个人中心页面写完,基本上这个项目的前端页面制作方面的工作大体就完成了,其它不足的我们在前后端交互的时候继续完善。 GitHub:https://github.com/Ewall1106/
Ewall
2018/12/06
2.1K0
黑马瑞吉外卖之购物车功能开发(添加购物车和购物车数据展示)
我们点击到这个按钮的时候,那么就会绑定到这个方法。这个方法会将数据给这个窗体中的数据项赋值。这个diaglogFlavor其实就是定义初始化在vue的data里面。其实是可以看作一个列表。
兰舟千帆
2022/12/02
1.1K0
实战 | 微信小程序之购物车功能
作者 | 林鑫 链接 | http://imweb.io/topic/59128ea36936ba9165f5bed8 前言 以往的购物车,基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能。 需求 先来弄清楚购物车的需求。 单选、全选和取消,而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品。当购物车为空时,页面会变为空购物车的布局 根据设计图,我们可以先实现静态页面。接下来,再看看一个购物车需要什么样的数
用户1097444
2022/06/29
1.9K0
实战 | 微信小程序之购物车功能
购物车的原理以及实现
  今天模拟京东的购物车实现原理完成了购物车模块的开发, 给大家分享下。 京东的购物车实现原理:在用户登录和不登录的状态下对购物车存入cookie还是持久化到redis中的实现。下面就来具体说次购物车的实现过程 两种情况: 用户登录,购物车存入redis中 用户未登录,购物车存入cookie中 比较两种方式的优缺点:  cookie:优点:数据保存在用户浏览器中,不占用服务端内存;用户体检效果好;代码实现简单      缺点:cookie的存储空间只有4k;更换设备时,购物车信息不能同步;cookie禁用,
用户2146856
2018/05/18
2.4K0
用Vue写加入购物车小功能
上述代码中,我们创建了一个简单的商品页面组件,该组件显示商品的名称、描述和价格,并有一个 “加入购物车” 的按钮。当按钮被点击时,addToCart 方法会被调用,该方法通过 Vuex store 触发了名为 ‘m_cart/addToCart’ 的 mutation,将商品添加到购物车中。
用户10781437
2023/10/10
3060
Android仿淘宝购物车,玩转电商购物车
前言 其实做一个电商购物车,还真不是一个轻松的活。但是只要掌握思路,一步一步来做,就会发现也就这样。废物不多说,直接上效果图 完整代码,github链接,希望能给个星,谢谢 效果图 GIF1.gif
用户2032165
2018/06/05
2.9K0
前端购物车&订单结算模块详解
首先, 我们需要在vant中找到对应的组件, 这里是ActionSheet组件。 通过对ActionSheet组件的修改, 从而得到我们需要的内容。
用户11097514
2024/05/31
6740
前端购物车&订单结算模块详解
19、分类详情页之基本页面结构
具体关于路由的跳转就不多讲了,具体可以参考前面第5章vue-router之什么是编程式路由
Ewall
2018/09/04
6440
19、分类详情页之基本页面结构
用js+cookie实现商城的购物车功能
<input name="buy" type="image" alt="第一个商品" src="images/buy.gif" align="middle" onclick="getInfo();" style="float:left;" /> <h1>商品1</h1><br/> <input type="image" alt="第二个商品" src="images/buy.gif" align="middle" onclick='common.intoCart(88,"test",60,50,1);' style="float:left;" /> <h1>商品2</h1>
用户3055976
2018/09/12
3.7K0
用js+cookie实现商城的购物车功能
购物车中变与不变的数据处理
结算的时候,选中状态时本地修改,不会远程同步,一般在第一次获取数据后,处理数据,统一设置为未选中,每次选中或者不选中,直接更改本地数据后调用setState。
挥刀北上
2021/02/03
8000
购物车中变与不变的数据处理
京东购物车分页方案探索和落地
--导读-- 本文主要结合京东购物车的特性,从技术和业务层面综合考量,探索商品附属信息分页加载方案,为逐步扩容的购物车诉求做好底层技术支撑。通过本文,读者可以充分了解到主数据分页加载和附属信息分页加载分别适用哪些业务场景。在实际开发过程中,结合应用特性选择合适的分页技术方案,保证应用低碳高效运行。
京东技术
2023/01/05
1.2K0
京东购物车分页方案探索和落地
25、商品详情页
(1)复制一份test.vue文件并重命名为goodsDetail作为我们的商品详情页面
Ewall
2018/09/04
2.2K0
25、商品详情页
干货 | 京东购物车的Java架构实现及原理!
4)用户登陆了用户名密码,添加商品, 关闭浏览器 外地老家打开浏览器  登陆用户名和密码
美的让人心动
2018/05/30
2.8K1
相关推荐
28、购物车结算页面-导航栏与地址选择布局
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档