uniapp右侧滑操作

 记录uniapp使用uni-swipe-action后打包app报错问题.自定义一个侧滑操作
一.html部分

<view class="productList" style="margin-bottom: 20rpx" v-for="(item, index) in pageData.productList" :key="item.id">
        <view
          :style="{ left: pageData.productList[index].boxLeft }"
          class="section"
          @touchstart="drawStart"
          @touchmove="drawMove($event, index)"
          @touchend="drawEnd($event, index)"
        >
          <view class="productItem" @click.stop="restore(index)"> 内容 </view>
          <view class="function">
            <view class="operation">
              <view class="edit-operation operation_box"> 操作部分 </view>
            </view>
          </view>
        </view>
      </view>

二.JS部分

const pageData = reactive({
    productList: []
})

//侧滑操作
const clientX = ref(0)

// 开始触摸
const drawStart = e => {
  // 获取开始触摸时的位置
  clientX.value = e.changedTouches[0].clientX
}
// 触摸过程
const drawMove = e => {
  //获取触摸过程中的结束位置
}
// 结束触摸
const drawEnd = (e, index) => {
  var endX = e.changedTouches[0].clientX
  let diff = endX - clientX.value
  // 防止误触 -- 给一个误差区间，防止用户误触.值(100)根据自己需求定义
  if (Math.abs(diff) > 100) {
    if (diff < 0) {
      pageData.productList[index].boxLeft = '-200rpx'
    } else {
      pageData.productList[index].boxLeft = '0'
    }
  }
}
// 点击恢复原来的位置
const restore = index => {
  pageData.productList[index].boxLeft = '0'
}

三.CSS部分

.section {
  min-height: 100%;
  width: 100%;
  margin-bottom: 16rpx;
  position: relative;
  transition: all 0.5s linear;
  left: 0;

  .function {
    height: 100%;
    border-radius: 8rpx;
    position: absolute;
    right: -140rpx;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}