第一步：写出你想要的两种风格

1.正常显示样式

css:box { height : 100%；}.项目{ position:relativetop : 0；宽度： 100%；高度： 150 rpx；border-bottom : # d9d 9实心1rpxpadd : 0；}.项目。内容{ background-color : # ffffff；高度： 100%；相对位置：left : 0；宽度： 100%；transition:全部0.3s}.项目。del-button { position : absolute；right :-140 rpx；宽度： 140 rpx；高度： 100%；背景色： # df 3448；color: # ffftop : 0；文本对齐：中心；display: flexjustice-content : center；align-items:居中；transition:全部0.3sfont-size : 24 rpx；}xwml:

view class=' box ' view class=' item { { status？ ' active ' } } ' view class=' content '显示正常内容/view view class=' del-button ' delete/view/view/view 2。显示删除按钮

item.active。内容{ left :-140 rpx；}.item.active。del-button { right : 0；}同时，控制样式在js中是否处于活动状态

data : { status : false//true表示正常显示，false表示显示删除按钮}，步骤2:绑定事件

事实上，此时，您可以绑定bindtap事件来切换活动状态。单击“显示正常内容”，然后单击“删除”。然后，现在把点击事件改为触摸，在触发前向左移动，很容易理解。(风格上，transition:全部0.3s已提前写好；只是为了在两种状态之间进行转换)

微信小程序提供了两个事件使用，一个是bindtouchstart，通过它我们可以得到用户刚点击(手指还没有抬起)时的坐标。

touch(e){///获取这个的起始坐标。startx=e. touches。clientxthis . starty=e . touchs[0]。clientY}，另一个是bindtouchmove，所以我们总是可以得到当前的坐标(当用户的手指一直在屏幕上滑动的时候)。因此，我们只需要得到X轴上运动的前后坐标为正，即向左运动。

TouchM(e) {//获取当前坐标this . currentx=e . Touchs[0]。clientxthis . currenty=e . touchs[0]。clientYconst x=this . startx-this . currentx；//横向移动距离常数y=数学。ABS(这个。开始吧。电流)；//垂直移动距离。如果稍微向左移动，可以接受if (x 35 y 110) {//向左滑动显示删除。setdata({ status 3360 false })} else if(x-35y 110){//向右滑动此。setdata({ status 3360 true })} })，然后绑定

view class=' box ' view class=' item { { status？ ' active ' } } ' view class=' content ' bindtuchstart=' touch ' bindtuchmove=' toucm ' show normal content/view view class=' del-button ' delete/view/view。删除视图中的bindtap可以通过删除方法删除。

以上是效果最简单的版本，需要添加很多优化。

摘要

以上是边肖介绍的微信小程序列表中删除项目的功能，对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！