主页/ 电商学院/微信小程序/微信小程序商城购的物车功能要注意的一些细节问题

微信小程序商城购的物车功能要注意的一些细节问题

以前做的网站商城都是以PC版和手机版的为主,最近一段时间,我接触到做微信小程序商城的项目越来越多,其实小程序商城跟网页版的商城在购物车功能上有很多类似的地方,下面我们就着重讨论下最近做的一个小程序商城的购物车功能,给那些要做小程序商城的程序员一点参考。
首先看看购物车排版和功能:如下图所示:
 

小程序商城购物车

显示的内容有商品图片,商品名称,商品参数,库存,价格,购买的数量,商品总价,是否选择等功能,当用户购买的点击增加数量或者填写的数量超过商品的库存时,会有出现以下提示:

商品库存

如果用户需要删除当前购物车的商品,可以有两种选择:一是用手指长按商品列表的商品一小段时间,两是向左滑动,弹出提示如下图所示:

购物车删除

然后点击删除按钮来进行对购买车商品的删除。
其中长按使用的是bindlongtap事件,而滑动删除是使用小程序自带的movable-view控件,movable-view控件可以在微信小程序的官方教程里查到使用的方法。
还有全选的功能,这个比较简单,跟网站版的很类似,但要注意的细节是,如果点击击某个商品让其处于非选中状态,则更新全选的状态为非选中状态,反之,如果所有的商品都处于选中状态,则更新例行的状态为选中状态。一般我们只在“全选”的按钮里处理全选与反选的状态,所以需要注意下,当选中或反选某个商品时,应该循环遍历判断所有商品的选中状态,至少有一个是非选中状态,则全选的状态为非选中。如下图所示:

小程序商城

上面说了长按可以删除商品,如果是点击某个商品,则跳转商品详情页面里,点击或长按可以根据时间来判定,bindtouchstart="mytouchstart" bindtouchend="mytouchend"

小程序代码

即touch_end与tou_start的时间差值,单为毫秒,例如可以判断两者相差小于0.35秒,则为点击,然后触发点击事件,即跳转到商品详情,反之则触发长按事件。
 
这就是小程序购物车一些要注意的细节问题,如果都做到了给用户的体验会更好。
  
 

网站声明:以上文章内容为优加的原创文章,如需转载,请注明出处,谢谢合作!
0 喜欢
564 浏览数

优加商学院

APP开发微信小程序开发网站开发
您好,直接联系技术沟通需求
扫码添加我的微信,直谈需求
非工作时间技术回复慢请谅解
咨询更详细需求
提交信息后我们会第一时间与你取得联系,请大致把需求填写在"咨询内容"里。
姓名
手机
咨询内容
立即提交