微信小程序中如何实现单个卡片左右滑动时按钮显示且避免滑动冲突？

本文共计859个文字，预计阅读时间需要4分钟。

实现类似iOS端微信的左滑显示设置顶部、删除按钮的功能，首先需将按钮部分设置为绝对定位，并使其右对齐屏幕。利用小程序事件处理API，分别读取触摸开始、移动和结束时的位置，以实现左滑效果。当触摸开始时，记录初始位置；在触摸移动时，根据位置变化调整按钮位置；触摸结束时，判断是否达到滑动阈值，若达到则执行删除操作。

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

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

<View style={`${positionStyle[index]}`}> <View onTouchStart={this.moveTaskStart} onTouchMove={this.moveTask} onTouchEnd={this.moveTaskEnd} > 这是主要的卡片部分 </View> <View style="right: -260px;">这是滑动后出现的按钮部分</View> </View>

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