uni-swipe-action不能用的解决方法

对于 uni-swipe-action.htm 不能使用重写写一个滑入滑出的效果

前言：对于 官方提供的代码也没有用，且报错的情况下，自定义滑入滑出删除组件

效果

开始编写

<template>
  
  <view class="good-item" :style="'transition-duration:0.3s;transform: translateX(-'+positionNum+'px);'" @touchstart="touchStart" @touchend="touchEnd"  @click="setNumInit">
    
      ···省略文档中的代码


    <view class="deleteText" @click="delateGoods"  style="right: 0; transform: translateX(100%);">删除</view>
  </view>

  
</template>

<script>
export default {
  props: {
    ···省略以上代码

      // 通过外部判断是否使用滑入删除组件
    isShowFlag:{ 
      type:Boolean,
      default:false 
    }
  },
  data() {
    return {
      
      positionNum:0,
      // 刚触碰的时间
      startTime:0,
      // 刚触碰的位置
      startPosition:0,
      // 结束的位置
      endPosition:0
    }
  },

  methods: {

    setNumInit(){
      this.positionNum=0
    },
    // 测试 作为删除的方法
    delateGoods(){
      // 可以用做删除的部分，然后可以继续看文档走
      console.log("删除")
    },

    touchStart(event){
      if(!this.isShowFlag){return}
      this.startTime = Date.now()
        // 获取初始的位置
        this.startPosition = event.changedTouches[0].clientX
      },
    touchEnd(event){
      if(!this.isShowFlag){return}
      const endTime = Date.now()
      if (endTime - this.startTime > 2000){
        // 如果手指滑动的距离超过2s 就默认不合法
        return;
      }
      // 判断其滑动的距离是否值得触发，给定一个10 的距离
      if (Math.abs(this.endPosition - this.startPosition) > 10){
        this.endPosition = event.changedTouches[0].clientX
        var elePosition = this.endPosition - this.startPosition > 0 ? "right": "left"
      } else {
        return;
      }
      if(elePosition=="right"){
        this.positionNum = 0
      }
      if(elePosition=="left"){
        this.positionNum = 90
      }

    },
  },
}
</script>

<style lang="scss">
.good-item {
      display: flex;
      padding: 10px 5px;
      border-bottom: 1px solid #efefef;
      // 需要加的样式代码
      width: 411px;
      position: relative;
  }

.deleteText{
  height: 49px;
  width: 67px;
  background-color: #C00000;
  color: #FFFFFF;
  display: flex;
  align-self: center;
  align-items: center;
  // text-align: center;
  justify-content: center;
  border-radius: 15px;
  margin-left: -50px;

}

</style>
 text-align: center;
  justify-content: center;
  border-radius: 15px;
  margin-left: -50px;

}

</style>

*有问题可私信！希望能够帮到你！*