好资源导航 » 文章资讯 » 微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能

微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能

2023-08-04 22:16:14 154

实现类似ios端微信的左滑显示置顶、删除按钮的功能，首先需将按钮部分设为绝对定位，并且right设为负值溢出屏幕。利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置。

这里有一个细节，为了防止按钮的点击干扰到卡片主部分的滑动，需要将整个卡片分为两部分。



这是主要的卡片部分


这是滑动后出现的按钮部分

这里使用的是Taro框架，方法与原生事件api一样，在开始滑动时分别存入X,Y坐标，在手指移动过程中计算移动的距离，当X的移动距离大于整个按钮部分的一班，展开按钮。

核心功能的实现，只需要分析X坐标即可，但因为用户可能在上下滑动过程中x坐标也会偏移造成按钮的展开，所以需要在move与end两部分都计算垂直坐标的改变与水平坐标改变形成的角度，当角度过大，视为上下滑动，按钮不展开。
完整代码如下：

moveTaskStart(e){
if(e.touches.length==1){
//触摸屏上只有一个触摸点
this.setState({
//开始触摸屏幕的X坐标
startX:e.touches[0].clientX,
startY:e.touches[0].clientY
});
}
}

moveTask(e){
if(e.touches.length==1){
letmoveX=e.touches[0].clientX;
letmoveY=e.touches[0].clientY;
//移动距离
letdisX=this.state.startX-moveX;
letdisY=this.state.startY-moveY;
letangle=disY>0?disY/disX:-disY/disX;
letbtnWidth=this.state.btnWidth;
lettxtStyle="";
if(disX==0||disX<30){
//右滑动
txtStyle="left:0px";
}elseif(angle>0.5){
return;
}elseif(disX>30&&angle<0.5){
txtStyle=`left:-${disX}px`;
if(disX>=btnWidth){
//距离最大值
txtStyle=`left:-${btnWidth}px`;
}
}
letindex=e.currentTarget.dataset.index;
letlist=this.state.positionStyle;
this.setState({
positionStyle:list
});
}
}

moveTaskEnd(e){
lettxtStyle;
if(e.changedTouches.length==1){
letendX=e.changedTouches[0].clientX;
letmoveY=e.changedTouches[0].clientY;
//移动距离
letdisX=this.state.startX-endX;
letdisY=this.state.startY-moveY;
//移动角度
letangle=disY>0?disY/disX:-disY/disX;
letbtnWidth=this.state.btnWidth;
//如果距离大于按钮宽度的一半，并且移动角度较小，显示按钮
if(disX>(btnWidth/2)&&angle<0.5){
txtStyle=`left:-${btnWidth}px`
}else{
txtStyle="left:0px"
}
letindex=e.currentTarget.dataset.index;
letlist=this.state.positionStyle;
list[index]=txtStyle;
this.setState({
positionStyle:list
});
}
}

总结

以上所述是小编给大家介绍的微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能

热门推荐

随机推荐