Bringen Sie Ihnen Schritt für Schritt bei, wie Sie schwebende Schaltflächen in Miniprogrammen implementieren (Codebeispiel)

Wie implementiert man schwebende Schaltflächen in Miniprogrammen? Der folgende Artikel stellt Ihnen vor, wie Sie die Floating-Button-Funktion in einem Miniprogramm implementieren. Ich hoffe, er wird Ihnen hilfreich sein!

Bei der täglichen Entwicklung kleiner Programme müssen wir möglicherweise die Schaltfläche schweben lassen, damit sie beim Verschieben der Seite ihre Position nicht ändert. Ich möchte beispielsweise die Schaltfläche „Teilen“ auf der Artikeldetailseite erstellen Es sieht so aus, als wäre es schwebend. Oder legen Sie eine schwebende Schaltfläche auf der Startseite fest, um einige skalierbare Funktionen zu implementieren.

Ich werde die Implementierung der schwebenden Schaltfläche unter zwei Aspekten erläutern Die andere besteht darin, die Schaltfläche schweben zu lassen. [Verwandte Lernempfehlungen: Miniprogramm-Entwicklungs-Tutorial]

Implementierung von Bildschaltflächen

In der vom Miniprogramm bereitgestellten Schaltflächenkomponente gibt es keine Funktion zum separaten Festlegen von Bildern in Schaltflächen, obwohl das Miniprogramm keine Unterstützung für natürliche Komponenten bietet , wir können diesen Effekt selbst erzielen

Erster Code

Seitencode

<!--pages/content-detail/content-detail.wxml-->
<button plain=&#39;true&#39;   class="circle">
  <image mode=&#39;aspectFill&#39; src=&#39;/images/icon/collect.png&#39; class=&#39;image&#39;></image>
</button>

css-Stilcode

.circle[plain] {
  padding: 0;
  border: none;
  width: 64rpx;
  height: 64rpx;
}

.image {
  width: 64rpx;
  height: 64rpx;
}

Kreis ist die Schaltflächenklasse, Bild ist die Bildklasse

Der Code ist sehr einfach, Xiaodan wird das erklären oben für alle Der Code

• Schaltflächenanzeige ausblenden

  Wir möchten das Bild anzeigen. Die Schaltfläche ist mit einem Bild umschlossen. Um die Schaltfläche auszublenden, kann plain='true' mit diesem Attribut erreicht werden.

• Den Rand der Schaltfläche ausblenden

  Zusätzlich zum Ausblenden der Schaltfläche müssen Sie auch den entsprechenden CSS-Stil ausblenden: Rahmen: Keine Hier ist zu beachten, dass die CSS-Klasse vorhanden sein muss hinzugefügt [plain]

  Zum Beispiel .circle[plain] , verschwindet der Rand möglicherweise nicht, wenn er nicht hinzugefügt wird.

• Bild- und Schaltflächenausrichtung

  Die Größe des Bildes muss mit der Größe der Schaltfläche übereinstimmen. Um eine Ausrichtung zu erreichen, muss der CSS-Stil in der Schaltfläche festgelegt werden: 0

Floating-Button-Implementierung

Bild-Button-Einstellungen Okay, wir müssen den Floating-Effekt erzielen, wir müssen nur die Position des Button-Stils auf „Fixed“ setzen.

.circle[plain] {
  display: flex;
  margin-right: 40rpx;
  right: 0;
  position: fixed;
  bottom: 15%;
  padding: 0;
  border: none;
  width: 64rpx;
  height: 64rpx;
}

position ist das Positionsattribut, das viele verschiedene Werte hat Werfen wir einen Blick auf die offizielle Definition von „fest“

reserviert keinen Platz für das Element, sondern gibt die Position des Elements an, indem es seine Position relativ zum Bildschirmansichtsfenster angibt. Die Position des Elements ändert sich nicht, wenn der Bildschirm scrollt. Beim Drucken erscheint das Element an einer festen Stelle auf jeder Seite. Das feste Attribut erstellt einen neuen Stapelkontext. Wenn das Transformationsattribut des Vorfahren eines Elements nicht „none“ ist, wird der Container vom Ansichtsfenster in diesen Vorfahren geändert.

Wir haben den Code des Floating-Buttons vollständig implementiert. Schauen wir uns den spezifischen Effekt an.

Zusammenfassung: Die Implementierung des gesamten Floating-Buttons erfordert eigentlich nicht viel Code Um die CSS-Kenntnisse zu beherrschen, ist die Implementierung nicht so schwierig.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmiervideos

! !

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie schwebende Schaltflächen in Miniprogrammen implementieren (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!