Vereinfachte Version der Fotovorschau für Mobiltelefone, Komponente_Javascript-Fähigkeiten

Schlecht, ich benutze ein Huawei 3C-Mobiltelefon und es ist einfach, die vorgefertigten Komponenten anderer Leute zu verwenden. Um mich an einen Verlierer wie mich anzupassen, habe ich eine Version des Fotovorschaueffekts vereinfacht und geschrieben Ich werde es vorerst noch einmal versuchen. Fügen Sie es hinzu. Sie können es auch selbst hinzufügen. Dies ist ein Open-Source-Projekt auf Github. Seine Github-Adresse lautet: https://github.com/tianxiangbing/mobile-photo-preview

Das Folgende ist eine Vorschau,

Verwendungsbeispiele:

var photoPreview = new MobilePhotoPreview();
    photoPreview.init({
      target: $('.preview-list'),
      trigger: '.preview',
      show: function(c) {
        var del = $('<span class="icon-del"><span>');
        $('.imgViewTop', c).append(del);
        del.tap(function() {
          photoPreview.current.remove();
          photoPreview.hide();
        });
      }
    });

oder:

$('.preview-list').MobilePhotoPreview({
      trigger: '.preview',
      show: function(c) {
        var del = $('<span class="icon-del"><span>');
        $('.imgViewTop', c).append(del);
        var _this = this;
        del.tap(function() {
          _this.current.remove();
          _this.hide();
        });
      }
    });
　　

Hinweis: Es gibt keinen wesentlichen Unterschied zwischen den beiden Methoden. Die erste wird empfohlen.

API-Eigenschaften, Methoden und Rückrufe:

Ziel:
Dies bedeutet, dass die Elemente in diesem Container das Ereignis auslösen. Es handelt sich um einen Bereich, der zusammen mit dem Auslöser zum Delegieren des Ereignisknotens verwendet wird. Daher ist dies erforderlich. Es wird empfohlen, den Root-Knoten nicht zu delegieren.
Auslöser:
Stellt das Objekt dar, das das Ereignis auslöst. Es kann standardmäßig durch einen Link unter dem Ziel
ausgelöst werden anzeigen:
Der Rückruf nach der Anzeige, der Parameter ist der Dialogcontainer, der derzeit auf die Instanz von MobilePhotoPreview verweist. Dies ist eine Rückrufmethode zur Erweiterung weiterer Funktionen. Um diesen Rückruf besser nutzen zu können, könnten Sie an den folgenden Eigenschaften interessiert sein
Eigenschaften und Methoden darunter:
aktuell:
Aktuelles Knotenobjekt
currentIndex:
Aktueller Index
objArr:
Array-Objekt. Hier können Sie eine Sammlung abrufen, einschließlich Index, Element, Breite und Höhe. Das wird sehr nützliches Zeug sein.
verstecken:
Was man nennt, ist das Verstecken

des Dialogs

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.