So implementieren Sie das Uniapp-Popup-Feld

Mit der Popularität des mobilen Internets beginnen immer mehr Menschen, Smartphones und Tablets für Online-Aktivitäten zu nutzen. Damit einhergehend steigt auch die Nachfrage nach mobilem App- und Webdesign. UniApp ist ein plattformübergreifendes Entwicklungsframework, das dieses Problem löst. Es bietet eine plattformübergreifende Entwicklungslösung, die eine Reihe von Codes und den Effekt der Ausführung auf mehreren Terminals erzielen kann, einschließlich, aber nicht beschränkt auf iOS, Android, H5 und andere Plattformen .

In diesem Artikel geht es hauptsächlich um die Popup-Box im UniApp-Framework.

Im UniApp-Framework ist das Popup-Feld eine der am häufigsten verwendeten Komponenten. Es kann uns dabei helfen, den Benutzer in Form eines Popup-Fensters auf dem Client aufzufordern, z. B. bei der Bestätigung von Vorgängen, beim Abrufen der Benutzeranmeldung usw Informationen usw. Daher ist die Implementierung des UniApp-Popup-Felds eine der Fähigkeiten, die wir beherrschen müssen.

1. Die Verwendung von UniApp-Popup-Boxen

Das UniApp-Framework bietet zwei verschiedene Arten von Popup-Boxen, um uns dabei zu helfen, unterschiedliche Anforderungen zu erfüllen. Werfen wir einen Blick auf eine der grundlegenden Verwendungen:

• Verwenden Sie Alert(), um einfache Textinformationen anzuzeigen.

Im UniApp-Framework können Sie die Methode Alert() verwenden, um dem Benutzer einfache Textinformationen im Formular anzuzeigen eines Popup-Fensters:

uni.alert({
  title: '提示信息',
  content: '这是一条简单的弹出提示',
  success: function () {
     console.log('弹出框已关闭')
  }
});

Unter diesen ist Titel der Titel des Popup-Fensters, Inhalt der Hauptinhalt des Popup-Fensters und Erfolg die Rückruffunktion, nachdem das Popup-Fenster geschlossen wurde Natürlich kann die Rückruffunktion der Abbruchtaste auch über Abbrechen implementiert werden.

• Verwenden Sie „confirm()“, um die Benutzerauswahl zu erhalten

Im UniApp-Framework können wir auch die Methode „confirm()“ verwenden, um das Eingabeaufforderungsfeld für die Auswahl aufzurufen, zum Beispiel:

uni.confirm({
  title: '选择操作',
  content: '你确定要进行某个操作吗？',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确认操作');
    } else if (res.cancel) {
      console.log('用户取消操作');
    }
  }
});

Im obigen Code ist die Bestätigung( )-Methode wird angezeigt. Ein Auswahlaufforderungsfeld fordert den Benutzer auf, eine Auswahl zu treffen. Nachdem der Benutzer die Auswahl abgeschlossen hat, erhalten wir die Auswahl des Benutzers über die Rückruffunktion und führen entsprechende Vorgänge für das Auswahlergebnis aus. Unter diesen gibt res.confirm an, dass der Benutzer den Vorgang bestätigt, und res.cancel gibt an, dass der Benutzer den Vorgang abbricht.

2. Implementieren Sie eine benutzerdefinierte UniApp-Popup-Box

Zusätzlich zur Verwendung der vom Framework bereitgestellten integrierten Methoden können wir die Popup-Box auch anpassen, um einen flexibleren Effekt zu erzielen. Schauen wir uns nun an, wie Sie eine benutzerdefinierte UniApp-Popup-Box implementieren.

1. HTML-Layout

Zuerst müssen wir das HTML-Layout eines Popup-Felds vorbereiten, zum Beispiel:

<template>
  <view class="modal">
    <view class="modal-content">
      <view class="modal-header">
        <h2>弹出框标题</h2>
        <i class="fa fa-times" @click="closeModal"></i>
      </view>
      <view class="modal-body">
        <p>这里是弹出框的主体内容</p>
      </view>
      <view class="modal-footer">
        <button type="button" @click="submit">确定</button>
        <button type="button" @click="closeModal">取消</button>
      </view>
    </view>
  </view>
</template>

Im obigen Layout verwenden wir die View-Komponente, um unterschiedliche Stileffekte durch unterschiedliche Klassenattribute zu erzielen. Wir haben auch Vue-Anweisungen wie @click verwendet, um Klickereignisse zu binden.

2. CSS-Stil

Als nächstes müssen wir den Stil des Popup-Felds weiter verarbeiten, um es schöner und vernünftiger zu machen, zum Beispiel:

.modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal .modal-content {
  width: 400rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  overflow: hidden;
}

.modal .modal-content .modal-header {
  background-color: #337ab7;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx;
}

.modal .modal-content .modal-header h2 {
  margin: 0;
}

.modal .modal-content .modal-header i {
  font-size: 20rpx;
  cursor: pointer;
}

.modal .modal-content .modal-body {
  padding: 20rpx;
}

.modal .modal-content .modal-footer {
  background-color: #eeeeee;
  padding: 10rpx;
  display: flex;
  justify-content: flex-end;
}

.modal .modal-content .modal-footer button {
  border: none;
  padding: 10rpx 20rpx;
  margin-left: 10rpx;
  border-radius: 5rpx;
  cursor: pointer;
}

.modal .modal-content .modal-footer button:first-child {
  background-color: #337ab7;
  color: #ffffff;
}

.modal .modal-content .modal-footer button:last-child {
  background-color: #dddddd;
  color: #333333;
}

Im obigen CSS-Stil haben wir einige CSS-Techniken verwendet Pseudoklassenbezeichner wie :after und :before implementieren die Stileffekte mehrerer Gruppen von Schaltflächen. Gleichzeitig verwenden wir auch Regeln wie @keyframes, um Animationseffekte zu definieren.

3. JS-Code

Schließlich müssen wir JS-Code schreiben, um die spezifischen Funktionen des Popup-Felds zu implementieren, wie zum Beispiel:

export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    closeModal() {
      this.visible = false;
    },
    submit() {
      console.log('执行提交操作');
      this.closeModal();
    }
  }
}

Im obigen Code verwenden wir die Methode data(), um Daten zu definieren Attribut mit dem Namen „visible“, das zum Speichern des Anzeige- und Schließstatus des Popup-Fensters verwendet wird. Gleichzeitig haben wir auch drei Methoden definiert: showModal(), closeModal() und subscribe(), mit denen die Anzeige und das Schließen der Popup-Box bzw. das Klickverhalten der Bestätigungsschaltfläche gesteuert werden.

4. Seitennutzung

Nach Abschluss der obigen Schritte können wir unser benutzerdefiniertes Popup-Feld auf einer bestimmten Seite verwenden, zum Beispiel:

<template>
  <view>
    <button type="button" @click="showModal">打开弹出框</button>
    <modal :visible.sync="visible"></modal>
  </view>
</template>

<script>
import Modal from '@/components/modal.vue';

export default {
  components: {
    Modal
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    }
  }
}
</script>

Im obigen Code verwenden wir die Vue-Komponentenschreibmethode durch den Import In der Syntax wird die von uns definierte modale Komponente eingeführt und anschließend in der data()-Methode auch ein Datenattribut namens „visible“ definiert. In der Vorlage rufen wir die showModal-Methode über das @click-Bindungsereignis des Button-Tags auf, um das Popup-Feld anzuzeigen.

3. Zusammenfassung

Zu diesem Zeitpunkt haben wir den gesamten Prozess der Anpassung der UniApp-Popup-Box abgeschlossen. Im Allgemeinen verfügt die von UniApp bereitgestellte Popup-Box-Komponente über integrierte Methoden wie Alert () und Bestätigung (), die grundlegende Anforderungen erfüllen können. Wenn Sie ein komplexeres Popup-Feld benötigen, können Sie das HTML-Layout verwenden. CSS-Stil, JS-Code usw. In diesem Aspekt kann der Effekt der Anpassung des Popup-Felds erzielt werden. Ich hoffe, dass dieser Artikel für die UniApp-Entwicklungsarbeit aller hilfreich sein kann.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Uniapp-Popup-Feld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!