基于uniapp的简单基础的滑动删除操作

基于uniapp的非常简单的左滑操作，可以自行改为组件方式。

template>
	view class="content">
		
    view class="slipe-item">
      
      view class="slipe-background" @tap="clickSlipe">view>
      view class="slipe-content" :class="{'transform-splipe': is_transfrom}" :style="(moveX!=0) ?'transform: translateX('+moveX+'px);' : ''" @touchmove="touchMove" @touchend="touchEnd" @touchstart="touchStart">
        image src="../../static/logo.png" mode="aspectFill" class="image-main">image>
        view class="title">滑我view>
      view>
    view>
	view>
template>

script>
	export default {
		data() {
			return {
				is_transfrom: false,//偏移样式显示
        		translateX: 0,//开始滑动的距离
        		moveX: 0,//移动距离
			}
		},
		onLoad() {

		},
		methods: {
	      /**
	       * 移动中
	       */
	      touchMove(e){
	        let moveX = (e.changedTouches[0].clientX - this.translateX)
	        //可自定义设置滑动偏移量，移除this.is_transfrom判定可进行右滑操作
	        if((moveX10&&moveX>-70)||(moveX>10&&moveX70&&this.is_transfrom)){
	          this.moveX = moveX
	        }
	      },
	      /**
	       * 停止移动
	       */
	      touchEnd(e){
	      	//可自定义设置滑动偏移量
	        if(this.moveX40){
	          this.is_transfrom = true
	        }else if(this.moveX>40){
	          this.is_transfrom = false
	        }
	        this.moveX = 0
	      },
	      /**
	       * 开始移动
	       */
	      touchStart(e){
	        this.translateX = e.changedTouches[0].clientX
	      },
	      /**
	       * 点击按钮事件
	       */
	      clickSlipe(e){
	        console.log('我点击删除了')
	      },
		}
	}
script>

style lang="scss">
  page{
    width: 100%;
    background: #f5f5f5;
  }
.content {
   	width: 100%;
    .slipe-item{
      position: relative;
      width: 100%;
      height: auto;
      box-sizing: border-box;
      background: #fff;
      border-raduis: 20rpx;
      overflow: hidden;
      
      .slipe-background{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        /* 可以设置为图片，也可设置文字 */
        background: url('~@/static/delet.png') no-repeat right;
        background-size: 50rpx 50rpx;
        background-position: calc(100% - 30rpx) 50%;
      }
      .slipe-content{
        position: relative;
        z-index: 1;
        width: 100%;
        display: flex;
        align-items: center;
        background: #fff;
        padding: 20rpx;
        .image-main{
          width: 100rpx;
          height: 100rpx;
          border-radius: 20rpx;
          margin-right: 20rpx;
        }
        .title{
          font-size: 26rpx;
        }
      }
      .transform-splipe{
      	/*可自定义设置滑动偏移量*/
        transform: translateX(-140rpx) !important;
      }
    }
}
style>