移动端左滑删除交互

        移动端项目开发做删除操作时常用的一个交互就是左滑出现删除按钮，点击进行删除。可以自己写样式、动画，也可以用更简单快捷的方式开发，使用现成的组件效果更好，更稳定，可以使用 uView 的 SwipeAction 滑动单元格实现

 一、使用说明

主要用到options属性和click点击事件，更多参数和用法可以去uView官网查看

SwipeAction 滑动单元格 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架uView UI，是 uni-app 生态最优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://www.uviewui.com/components/swipeAction.html

二、代码实现

<u-swipe-action class="card-item" v-for="(item, index) in cardData" :key="item.batchCode">
            <u-swipe-action-item @click="(v) => handleDelete(v, index)" :options="options1">
              <view class="c-wrap-top">
                <view class="c-text">批次号：{{item.batchCode}}</view>
              </view>
              <view class="spe-col">
                <view class="col-item">
                  <view class="c-text">入库数量：</view>
                  <view class="c-val">
                    <u--input style="width: 70px;height: 30px" :adjustPosition="false" type="number" fontSize="12px"
                      v-model="item.inRepAmount">
                    </u--input>
                  </view>
                </view>
                <view class="col-item col-item-spe">
                  <view class="c-text">单位：</view>
                  <view class="c-val">{{item.unitOfMeasure}}</view>
                </view>
              </view>
              <view class="spe-item">
                <view class="c-text">物料编码：</view>
                <view class="c-val">{{item.itemCode}}</view>
              </view>
              <view class="spe-item">
                <view class="c-text">物料名称：</view>
                <view class="c-val">{{item.itemName}}</view>
              </view>
              <view class="spe-item spe-tt">
                <view class="c-text">规格型号：</view>
                <view class="c-val">{{item.specification}}</view>
              </view>

            </u-swipe-action-item>
          </u-swipe-action>

handleDelete(obj, i) {
  // 第一个按钮（删除）操作
  if (obj.index === 0) {
    this.cardData.splice(i, 1);
  }
},

三、效果展示

这世界很喧嚣，做你自己就好