Reproduktionsdiagramm
Schritt 1: Laden
<script src = "js/jquery.min.js"> </script> <script src = "js/jquery.mobile-1.3.2.min.js"> </script>
Schritt 2: HTML
<div> <div> <img src="images/icon.png"> </div> <div> <p> Minions</p> <p> Minions</p> <p> Minions</p> <p> Minions</p> <p> Minions</p> </div> <i></i> <a>Delete</a> </div> <div> <div> <img src="images/icon.png"> </div> <div> <p> Minions</p> <p> Minions</p> <p> Minions</p> <p> Minions</p> <p> Minions</p> </div> <i></i> <a>Delete</a> </div></div>
Schritt 2: CSS
.Item-wrap {Überlauf: versteckt; } .Item-wrap .Item {Border-Bottom: 1px #ff Solid; Hintergrund: #000; Breite: 125%; Überlauf: versteckt; Position: Relativ; Anzeige: -Webkit -Box; -Webkit-Übergang: Alle 0,3s linear; } .Item-wrap .Item .img-item {width: 50px; Höhe: 50px; Rand: 10px; } .Item-wrap .Item .img-item img {width: 100%; Grenzradius: 50%; } .Item-wrap .Item .txt-item {padding-top: 10px; Rand-Rechts: 25px; Schriftgröße: 14px; Zeilenhöhe: 24px; Farbe: #fff; -Webkit-Box-Flex: 1; } .Item-wrap .Item .Arrow {width: 0; Höhe: 0; Zeilenhöhe: 0; Schriftgröße: 0; Grenzstil: solide; Grenzfarbe: transparent transparent transparent #FFF; Randbreite: 8px 0px 8px 8px; Position: absolut; Rechts: 22%; Top: 50%; Margin-Top: -8px;}. Delect-Btn {Breite: 20%; Rand-Links: 15px; Farbe: #fff; Hintergrund: #0f0; Z-Index: 999; Anzeige: Block; Text-Align: Mitte; Padding-Top: 5%;}. Item-Wrap. Selected {-Webkit-Transform: Translate (-16%); -Webkit-Übergang: Alle 0,3s linear;}Schritt 2: JQ
<Script> $ (". item"). on ('swipeleft', function (event) {event.preventDefault (); / * Act on the Event Event.PreventDefault (); $ (". item"). on ('Swiperight', Funktion (Ereignis) {Event.PreventDefault ();/ * Acton One Ereignis */$ (this) .removeclass ('ausgewählt');}); </script>Der obige Artikel JQ erkennt, dass der linke Swipe die Schaltfläche Löscher löschen und zum Löschen klicken, um zu realisieren, dass die Löschdatenfunktion (empfohlen) der gesamte Inhalt ist, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.