商城小程序购物车左滑和长按删除商品

2023-12-01 0 111

商城小程序由于其易于在微信推广,已经完全取代微商城了,以下元星域分享如何在购物车里实现左滑和长按删除商品的功能实现。

商城小程序购物车

微信小程序没有APP那种直接左滑弹出按钮的功能,所以要实现左滑删除需要自己写代码!

初始方案有几个:

1、使用view组件通过定位来实现;
2、通过scroll_view组件实现;
3、通过组件movable-view来实现;

通过对比发现,第三种方案用户体验最好,滑动起来非常流畅,当滑动比较小时还可以回到初始状态。

大概思路如下,
movable-area里面放置购物车信息,然后删除按钮采用绝对定位在右边,正常情况下删除按钮被覆盖,当滑动时显示。

wxml代码如下

wxml代码

CSS代码如下

CSS代码

JS代码如下

showDeleteButton: function (e) {
let productIndex = e.currentTarget.dataset.productindex
this.setXmove(productIndex, -150)
},
/**
* 隐藏删除按钮
*/
hideDeleteButton: function (e) {
let productIndex = e.currentTarget.dataset.productindex
this.setXmove(productIndex, 0)
},
/**
* 设置movable-view位移
*/
setXmove: function (productIndex, xmove) {
let carts = this.data.carts
console.log(‘xmove:’+xmove)
carts[productIndex].xmove = xmove
this.setData({
carts: carts
})
},
/**
* 处理movable-view移动事件
*/
handleMovableChange: function (e) {
if (e.detail.source === ‘friction’) {
if (e.detail.x < -30) {
this.showDeleteButton(e)
} else {
this.hideDeleteButton(e)
}
} else if (e.detail.source === ‘out-of-bounds’ && e.detail.x === 0) {
this.hideDeleteButton(e)
}
}

通过以上即可实现左滑弹出删除按钮 从而删除商品的功能,
下面讲解如何通过长按删除商品。

主要通过事件
bindlongtap=”del_cart” bindtouchstart=”mytouchstart” bindtouchend=”mytouchend”

因为bindlongtap有点的BUG,会触发单击事件,所以需要在单击事件中判断是长按还是单击,

代码如下

mytouchstart: function (e) { //按下事件开始 用于判断单击还是长按
let that = this;
that.setData({
touch_start: e.timeStamp
})
//console.log(e.timeStamp + ‘- touch-start’)
},
mytouchend: function (e) { //按下事件结束 用于判断单击还是长按
let that = this;
that.setData({
touch_end: e.timeStamp
})
//console.log(e.timeStamp + ‘- touch-end’)
}

元星域专注于商城小程序定制开发,欢迎有需求客户咨询我们客服。

版权所属:傲刃服务商城

傲刃服务 建站教程 商城小程序购物车左滑和长按删除商品 https://www.lowcodebbs.com/1605.html

常见问题
  • 部署服务[500元]:提供代码部署服务,提供技术咨询客服
    一条龙服务[3000元]:包含 价值1799的云服务器、域名、SSL证书、备案服务、小程序免300认证开通、特约商户申请、支付接口申请等服务保障您系统的正常上线,如需软著、应用上架、提升服务器配置则另外收取费用。
查看详情
发表评论
暂无评论