J9国际集团|Home

135-2716-3909
网站建设资讯详细

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

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

小程序商城购物车

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

商品库存

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

购物车删除

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

小程序商城

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

小程序代码

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

如没特殊注明,文章均为J9国际集团原创,转载请注明来自https://www.lyzhuzao.com/news/4942.html