Das mobile Vue-Terminal realisiert den gesamten Prozess des Bearbeitens und Löschens nach links

npm installiere vue-touch@next --save

importiere VueTouch von „vue-touch“;
Vue.use(VueTouch, {
  Name: „v-touch“
});

<div Klasse="wrap">
      <v-berühren
        Stil="Rand unten:10px"
        v-on:panstart="onPanStart(Schlüssel)"
        v-on:panmove="beiPanMove"
        v-on:panend="amPanEnde"
        v-for="(Element, Schlüssel) in Liste"
        :Schlüssel="Schlüssel"
      >
  <!-- Das folgende Div ist der Inhalt der Elemente, die durch Wischen nach links auf meiner Seite gelöscht werden müssen. Sie können es durch Ihr eigenes ersetzen-->
        <div class="item df_sb item-p" :style="activeId === Schlüssel ? Wischen : ''">
          <p Klasse="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>Keine</p>
          <p class="Stadt">{{item.stadt}}</p>
          <div Klasse="edit-delete df_sad" :ref="'editBtn' + key">
            <div Klasse="bearbeiten" @click="editFun('bearbeiten',item.id,item.image_url,item.redirect_url)">
              <img src="../../assets/images/adver/ic_xiugai.png" alt>
            </div>
            <p Klasse = "Editierzeile"></p>
            <div Klasse="ad-delete" @click="deleteFun(Schlüssel,item.id)">
              <img src="../../assets/images/adver/ic_shanchu.png" alt>
            </div>
          </div>
        </div>
      </v-berühren>
    </div>

<Skript>
importiere httpApi von "../../http/httpApi";
Standard exportieren {
  Name: "",
  Daten() {
    zurückkehren {
      swipe: "", // Gleitstil wd: 0, // die Summe der Breiten der Bearbeiten- und Löschen-Buttons swipeWd: 0, // die Distanz, die Sie gerutscht sind activeId: "", // eigentlich die letzte Aktivitäts-ID
    // Die obigen vier Variablen müssen beibehalten werden, die folgenden drei können gelöscht werden: Seite 1,
      Größe: 10,
      Liste: []
    };
  },
  Methoden: {
//Listendaten anfordern getList($state) {
      let params = neue URLSearchParams();
      params.append("Seite", diese.Seite);
      params.append("Größe", diese.Größe);
      dies.$post(httpApi.BANNERLIST, Parameter)
        .then(res => {
          wenn (res.code == 10000) {
            wenn (res.data) {
              diese.Liste = diese.Liste.concat(res.data.list);
              diese.seite++;
              wenn (res.data.list.length === 10) {
                $zustand.geladen();
              } anders {
                $zustand.abgeschlossen();
              }
            } anders {
              $zustand.abgeschlossen();
            }
          } anders {
            $zustand.abgeschlossen();
          }
        })
        .catch(err => {
          console.log(fehler);
        });
    },
    // Bearbeiten editFun(Typ, Bild-ID, Bild, URL) {
      dies.$router.push({
        Pfad: "/issueAdvertising",
      });
    },
    // löschen deleteFun(index, image_id) {
      this.activeId = ""; // Letzte Aktivitäts-ID leeren let params = new URLSearchParams();
      params.append("agent_id", diese.id);
      params.append("Bild-ID", Bild-ID);
      dies.$post(httpApi.DELETEBANNER, Parameter)
        .then(res => {
          wenn (res.code == 10000) {
// Obwohl die Anforderung zum Löschen der Schnittstelle eines der Elemente in der Liste löscht, sind immer noch // Elemente auf der Seite vorhanden. Daher müssen diese auch im lokalen Array gelöscht werden, damit alles perfekt ist. Die folgende Codezeile ist wichtiger und kann an der Stelle geschrieben werden, an der Sie die Schnittstelle erfolgreich gelöscht haben: this.list.splice(index, 1); 
            this.modal.toastFun("Erfolgreich gelöscht");
          } sonst wenn (res.code == 20000) {
            dies.modal.toastFun(res.message);
          }
        })
        .catch(err => {});
    },
 
// Die folgenden drei Methoden werden alle unverändert kopiert // gleitende Position onPanStart(id) {
      event.preventDefault();
      // Die richtige Schaltflächenbreite ermitteln let str = "editBtn" + id;
      dies.wd = 1,2 * dies.$refs[str][0].offsetWidth;
      // Initialisierung if (this.activeId != id) {
        dies.swipe = "transformieren:übersetzenX(0px)";
        dies.swipeWd = 0;
      }
      diese.activeId = ID;
    },
//Gleitposition onPanMove(event) {
      event.preventDefault();
      sei deltaX = Ereignis.deltaX;
      // Komponente bewegt sich nach links bis zur maximalen Distanz if (deltaX < 0 && deltaX > -this.wd) {
        //Nach links schieben this.swipe = "transform:translateX(" + deltaX + "px)";
        dies.swipeWd = deltaX;
      }
 
      wenn (deltaX > 0 && deltaX <= this.wd && this.swipeWd < 0) {
        //Nach rechts wischen let wx = deltaX + this.swipeWd;
        dies.swipe = "transform:translateX(" + wx + "px)";
      }
    },
 // Endposition onPanEnd(event) {
      event.preventDefault();
      // Bestimmen Sie, ob die nach links zurückgelegte Distanz größer als die Hälfte ist. let deltaX = event.deltaX;
      wenn (deltaX < 0) {
        wenn (deltaX <= -this.wd / 2) {
          //Mehr als die Hälfte nach links schieben this.swipe = "transform:translateX(" + -this.wd + "px)";
          dies.swipeWd = -this.wd;
        } anders {
          dies.swipe = "transformieren:übersetzenX(0px)";
          dies.swipeWd = 0;
        }
      } anders {
        wenn (this.swipeWd < 0 und deltaX >= this.wd / 2) {
          //Mehr als die Hälfte nach links schieben this.swipe = "transform:translateX(0px)";
          dies.swipeWd = 0;
        } anders {
          this.swipe = "transform:translateX(" + this.swipeWd + "px)";
        }
      }
    }
  },
 
};
</Skript>

.wickeln {
  Breite: 100 %;
  Höhe: 100%;
  Überlauf: versteckt;
}
.Artikel {
  Polsterung links: 40px;
  Höhe: 120px;
  Hintergrund: #ffffff;
  Elemente ausrichten: zentrieren;
  Flex-Richtung: erben;
  .links-img {
    Breite: 120px;
    Höhe: 100px;
    Überlauf: versteckt;
    img {
      Mindestbreite: 120px;
      Höhe: 100px;
    }
  }
}
.URL {
  Breite: 400px;
  Polsterung: 10px 30px 0;
  Box-Größe: Rahmenbox;
  Zeilenumbruch: Wort umbrechen;
  Textausrichtung: zentriert;
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
  Leerzeichen: Nowrap;
}
.Stadt {
  Textausrichtung: zentriert;
  Mindestbreite: 100px;
}
.Artikel-p {
  Farbe: #333333;
  Schriftgröße: 22px;
}
.nichthaben {
  Farbe: #999999;
}
.Hinweis {
  Höhe: 40px;
  Elemente ausrichten: zentrieren;
  Rand unten: 30px;
}
.Linie {
  Breite: 250px;
  Höhe: 1px;
  Hintergrund: #999999;
  Deckkraft: 0,5;
}
.Artikel {
  Breite: 120 %; // mehr als 100 %
  Übergang: 0,1 s Leichtigkeit 0 s; // Übergangseffekt}
.edit-line {
  Breite: 2px;
  Höhe: 80px;
  Hintergrund: rgba(255, 255, 255, 1);
}
.bearbeiten-löschen {
  Breite: 160px;
  Höhe: 100%;
  Hintergrund: rgba(255, 126, 34, 1);
  Deckkraft: 0,8;
  Elemente ausrichten: zentrieren;
}
.bearbeiten,
.ad-delete {
  img {
    Breite: 42px;
    Höhe: 42px;
  }
}
.add-btn {
  Breite: 200px;
  Höhe: 80px;
  Hintergrund: rgba(255, 126, 34, 1);
  Kastenschatten: 0px 0px 5px 0px rgba (221, 221, 236, 1);
  Rahmenradius: 40px;
  Textausrichtung: zentriert;
  Zeilenhöhe: 80px;
  Farbe: #ffffff;
  Schriftgröße: 30px;
  Position: fest;
  unten: 8 %;
  links: 50%;
  transformieren: übersetzenX(-50%);
}