Vueモバイル端末は左スライド編集と削除の全プロセスを実現します

npm をインストール vue-touch@next --save

'vue-touch' から VueTouch をインポートします。
Vue.use(VueTouch, {
  名前: 'v-touch'
});

<div class="wrap">
      <vタッチ
        スタイル="margin-bottom:10px"
        v-on:panstart="onPanStart(キー)"
        v-on:panmove="onPanMove"
        v-on:panend="onPanEnd"
        v-for="(リスト内の項目、キー)"
        :key="キー"
      >
  <!-- 下の div は、私のページで左にスワイプして削除する必要がある項目の内容です。独自のものに置き換えることができます -->
        <div class="item df_sb item-p" :style="activeId === key ? スワイプ : ''">
          <p class="left-img">
            <img :src="item.image_url" alt>
          </p>
          <p class="url" v-if="item.redirect_url != '' ">{{item.redirect_url}}</p>
          <p class="city nothave" v-else>なし</p>
          <p class="city">{{item.city}}</p>
          <div class="edit-delete df_sad" :ref="'editBtn' + キー">
            <div class="edit" @click="editFun('edit',item.id,item.image_url,item.redirect_url)">
              <img src="../../assets/images/adver/ic_xiugai.png" alt>
            </div>
            <p class="edit-line"></p>
            <div class="ad-delete" @click="deleteFun(key,item.id)">
              <img src="../../assets/images/adver/ic_shanchu.png" alt>
            </div>
          </div>
        </div>
      </v-タッチ>
    </div>

<スクリプト>
「../../http/httpApi」からhttpApiをインポートします。
エクスポートデフォルト{
  名前： ""、
  データ（） {
    戻る {
      swipe: "", // スライド スタイル wd: 0, // 編集ボタンと削除ボタンの幅の合計 swipeWd: 0, // スライドした距離 activeId: "", // 実際には最後のアクティビティ ID
    //上記の4つの変数は保持する必要があり、次の3つは削除できます。ページ: 1、
      サイズ: 10,
      リスト: []
    };
  },
  メソッド: {
//リストデータをリクエストする getList($state) {
      params = new URLSearchParams();
      params.append("ページ", this.page);
      パラメータを追加します("サイズ", this.size);
      this.$post(httpApi.BANNERLIST、パラメータ)
        .then(res => {
          （res.code == 10000）の場合{
            （res.data）の場合{
              this.list = this.list.concat(res.data.list);
              this.page++;
              (res.data.list.length === 10)の場合{
                $state.loaded();
              } それ以外 {
                $state.complete();
              }
            } それ以外 {
              $state.complete();
            }
          } それ以外 {
            $state.complete();
          }
        })
        .catch(エラー => {
          コンソールログ(エラー);
        });
    },
    // 編集 editFun(type, image_id, image, url) {
      this.$router.push({
        パス: "/issueAdvertising",
      });
    },
    // 削除 deleteFun(index, image_id) {
      this.activeId = ""; // 最後のアクティビティ ID を空にします let params = new URLSearchParams();
      パラメータを追加します("agent_id", this.id);
      パラメータを追加します。
      this.$post(httpApi.DELETEBANNER、パラメータ)
        .then(res => {
          （res.code == 10000）の場合{
// インターフェースを削除するリクエストによりリスト内の項目の 1 つが削除されますが、ページにはまだ項目が残っているため、完璧になるようにローカル配列内の項目も削除する必要があります。次のコード行はより重要であり、インターフェースを正常に削除する場所に記述できます。this.list.splice(index, 1); 
            this.modal.toastFun("正常に削除されました");
          } そうでない場合 (res.code == 20000) {
            this.modal.toastFun(res.message);
          }
        })
        .catch(エラー => {});
    },
 
// 以下の 3 つのメソッドはすべて変更せずにコピーされます // スライド位置 onPanStart(id) {
      イベントをデフォルトにしない();
      // 右ボタンの幅を取得します。let str = "editBtn" + id;
      this.wd = 1.2 * this.$refs[str][0].offsetWidth;
      // 初期化 if (this.activeId != id) {
        this.swipe = "transform:translateX(0px)";
        this.swipeWd = 0;
      }
      this.activeId = id;
    },
//スライド位置 onPanMove(event) {
      イベントをデフォルトにしない();
      deltaX = event.deltaX; とします。
      // コンポーネントは最大距離まで左に移動します if (deltaX < 0 && deltaX > -this.wd) {
        //左にスライド this.swipe = "transform:translateX(" + deltaX + "px)";
        this.swipeWd = deltaX;
      }
 
      deltaX > 0 && deltaX <= this.wd && this.swipeWd < 0 の場合 {
        //右にスワイプ let wx = deltaX + this.swipeWd;
        this.swipe = "transform:translateX(" + wx + "px)";
      }
    },
 // 終了位置 onPanEnd(event) {
      イベントをデフォルトにしない();
      // 左に移動した距離が半分より大きいかどうかを判断します。let deltaX = event.deltaX;
      （デルタX < 0）の場合{
        （デルタX <= -this.wd / 2）の場合{
          // 半分以上左にスライドします this.swipe = "transform:translateX(" + -this.wd + "px)";
          this.swipeWd = -this.wd;
        } それ以外 {
          this.swipe = "transform:translateX(0px)";
          this.swipeWd = 0;
        }
      } それ以外 {
        （this.swipeWd < 0 && deltaX >= this.wd / 2）の場合{
          // 半分以上左にスライドします this.swipe = "transform:translateX(0px)";
          this.swipeWd = 0;
        } それ以外 {
          this.swipe = "transform:translateX(" + this.swipeWd + "px)";
        }
      }
    }
  },
 
};
</スクリプト>

。包む {
  幅: 100%;
  高さ: 100%;
  オーバーフロー: 非表示;
}
。アイテム {
  左パディング: 40px;
  高さ: 120px;
  背景: #ffffff;
  アイテムの位置を中央揃えにします。
  flex-direction: 継承;
  .left-img {
    幅: 120ピクセル;
    高さ: 100px;
    オーバーフロー: 非表示;
    画像 {
      最小幅: 120px;
      高さ: 100px;
    }
  }
}
.url {
  幅: 400ピクセル;
  パディング: 10px 30px 0;
  ボックスのサイズ: 境界線ボックス;
  単語折り返し: 単語を区切る;
  テキスト配置: 中央;
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
  空白: ラップなし;
}
。市 {
  テキスト配置: 中央;
  最小幅: 100px;
}
.item-p {
  色: #333333;
  フォントサイズ: 22px;
}
.nothave {
  色: #999999;
}
.ヒント{
  高さ: 40px;
  アイテムの位置を中央揃えにします。
  下部マージン: 30px;
}
。ライン {
  幅: 250ピクセル;
  高さ: 1px;
  背景: #999999;
  不透明度: 0.5;
}
。アイテム {
  width: 120%; // 100%以上
  transition: 0.1s ease 0s; // トランジション効果}
.編集行 {
  幅: 2px;
  高さ: 80px;
  背景: rgba(255, 255, 255, 1);
}
.編集削除{
  幅: 160ピクセル;
  高さ: 100%;
  背景: rgba(255, 126, 34, 1);
  不透明度: 0.8;
  アイテムの位置を中央揃えにします。
}
。編集、
.ad-delete {
  画像 {
    幅: 42px;
    高さ: 42px;
  }
}
.add-btn {
  幅: 200ピクセル;
  高さ: 80px;
  背景: rgba(255, 126, 34, 1);
  ボックスの影: 0px 0px 5px 0px rgba(221, 221, 236, 1);
  境界線の半径: 40px;
  テキスト配置: 中央;
  行の高さ: 80px;
  色: #ffffff;
  フォントサイズ: 30px;
  位置: 固定;
  下位：8%
  左: 50%;
  変換: translateX(-50%);
}