uniapp自定义左滑删除组件

本来是用movable-area配合movable-view写的，写完发现这个会有一些问题，所以就自己写洛

创建组件components/MySwipeActionItem/MySwipeActionItem.vue

touchmove: 手指移动触发

touchstart: 手指触摸到屏幕触发

touchend: 手指离开屏幕触发

<view class="SwipeActionBox">
	<view class="SwipeActionItem" @touchmove="touchmove" @touchstart="touchstart"
				@touchend="touchend"
				:style="[{'width':'calc(100% + '+btnWidth+'px)'},{'transform':'translateX('+offsetX+'px)'}]">
		<view class="left" :style="{'width':'calc(100% - '+btnWidth+'px)'}">
			<slot name="left" />
		</view>
		<view class="right" :style="{'width': btnWidth+'px'}">
			<slot name="right"></slot>
		</view>
	</view>
</view>

css部分

 

.SwipeActionBox {
		position: relative;
		width: 100%;
		height: 152rpx;
		overflow: hidden;

		.SwipeActionItem {
			height: 100%;
			display: flex;
		}
	}

js部分

export default {
		props: {
            // 接收的按钮宽度
	        btnWidth: {
		        type: [String, Number],
		        default: 0
	        }
        },
		data() {
			return {
				startX: 0,  // 开始接触点
				offsetX: 0,  // 移动距离
                oldOffsetX: 0, // 记录上一次偏移的位置
			}
		},
		onLoad() {

		},
		methods: {
            touchstart(e) {
				this.startX = e.touches[0].pageX
			},
            touchmove(e) {
				var currX = e.touches[0].pageX //手指当前的X轴坐标
				var slideX = Math.abs(currX - this.startX) //X轴移动的距离
				var oldOffsetX = this.oldOffsetX //上一次触摸结束时的偏移量
                // 这里加上上一次的位置防止每次触发都会闪一下回到初始状态在进行移动
				var offsetX = currX - this.startX + oldOffsetX //计算手指在X轴上移动的距离
                // 移动范围大于按钮不进行移动了，小于同理，防止移出范围区域
				if (offsetX < -this.btnWidth) offsetX = -this.btnWidth
				if (offsetX > 0) offsetX = 0
                // 修改偏移量
				this.offsetX = offsetX
			},
            touchend() {
				var offsetX = this.offsetX //当前偏移量
				//当前手指松开的时候偏移量大于按钮宽度 / 2则自动完全展开，否则自动关闭
                // 防止移动一半卡在半路就不太好了
				if (Math.abs(offsetX) > this.btnWidth/ 2) {
					offsetX = -this.btnWidth
				} else {
					offsetX &#