• 400-800-9385
    网站建设资讯详细

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

    发表日期:2019-03-12 09:25:58   作者来源:方维网络   浏览:567   标签:小程序商城    
    以前做的网站商城都是以PC版和手机版的为主,最近一段时间,我接触到做微信小程序商城的项目越来越多,其实小程序商城跟网页版的商城在购物车功能上有很多类似的地方,下面我们就着重讨论下最近做的一个小程序商城的购物车功能,给那些要做小程序商城的程序员一点参考。
    首先看看购物车排版和功能:如下图所示:
     

    小程序商城购物车

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

    商品库存

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

    购物车删除

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

    小程序商城

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

    小程序代码

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

    如没特殊注明,文章均为方维网络原创,转载请注明来自http://www.kamokamon.com/news/4942.html
    武汉福利彩票