Beispiel für das Erreichen eines Deckeneffekts mit dem WeChat-Applet

Der Hintergrund ist ein Datumstitel. Wenn der Benutzer gleitet, tritt beim Gleiten zu den aktuellen Datumslistendaten ein Deckeneffekt auf, und dieser Effekt unterscheidet sich vom ursprünglichen Stil.

1. Umsetzung

• Die Scroll-Ansicht ist eine native Komponente des Miniprogramms
• handleScroll ist das Ereignis, das beim Schieben ausgelöst wird
• scroll-y bedeutet, dass das Gleiten in vertikaler Richtung erlaubt ist
• Das Element mit der Klasse „fixiert“ wird hier oben im Scroll-View-Container fixiert, um das aktuelle Datum anzuzeigen.
• Verwenden Sie die dynamische Bindungsklassenmethode, um die Anzeige der Sichtbarkeit zu steuern
• Das Element mit dem Unterrichtsplantag ist der Titel jedes Datums.
• Der Wert von data-value ist an das Datum gebunden

• Diese Funktion verarbeitet die Daten der Entfernung jedes ScheduleDay-Elements vom oberen Rand der Bildlaufansicht und dem aktuellen Datum.
• Die Daten werden wie folgt erhoben usw.
• wx.createSelectorQuery()-Verwendungsdetails (wird im Allgemeinen verwendet, um die Standortinformationen eines Elementknotens abzurufen)
• developer.weixin.qq.com/miniprogram…

ZeitplanInfo:[
    {
       oben: 8,
       aktueller Tag: '2021-08-15'
    },
    {
       oben: 213,
       aktueller Tag: '2021-08-14'
    },
    {
       oben: 555,
       aktueller Tag: '2021-08-13'
    },
    ...
]

• e.detail.scrollTop ist die Gleitdistanz in der Scroll-View-Komponente
• Wenn die Gleithöhe >= der Abstand zwischen einem bestimmten Elementknoten und der Oberseite der Scrollansicht ist, legen Sie das aktuelle Gleitdatum fest
• Anschließend können Sie das Erscheinen oder Ausblenden von fest positionierten Elementen steuern, um Folgendes zu erreichen:

In diesem Artikel wird nicht zu viel über CSS gezeigt. Der funktionale Effekt kann erreicht werden, solange das logische Denken korrekt ist.

2. Probleme

• Aufgrund des Fehlers bei der Häufigkeit des Auslösens des HandleScroll-Schiebeereignisses wird das feste Element beim Schieben nach oben nicht ausgeblendet
• Beim Hochziehen führen das feste Element und der Datumstitel an der ursprünglichen Position zu einem schlechten UI-Erlebnis
• Siehe folgende Abbildung

Diese Abbildung zeigt die Standard-UI-Anzeige

Die UI-Anzeige, wenn der Benutzer zur Listenposition unter dem Datum gleitet, oder die Situation, in der der erste Punkt des Problems vorliegt

Dann wird es den zweiten Punkt des Problems beeinflussen

3. Überlegen Sie, ob es eine bessere Möglichkeit zur Umsetzung gibt

Die erste Idee bestand darin, dem Datumstitel jedes Elementknotens dynamisch eine entsprechende Klasse hinzuzufügen, um die Änderung einzelner Stile zu steuern. Allerdings ist die Klasse jedes Elements dieselbe und das Problem lässt sich mit dieser Methode nicht lösen.

Die Änderung erfolgt durch die Steuerung des Stils jedes einzelnen Elementknotens. Anders als beim DOM im Browser kann das Miniprogramm den Stil jedes einzelnen Elements jedoch nicht über dom.style.xxx ändern.

IntersectionObserver, diese Methode wurde auch ausprobiert, hat aber nicht funktioniert. Ich werde es bei Gelegenheit noch einmal versuchen.

Zusammenfassen

Dies ist das Ende dieses Artikels zum Erzielen von Deckeneffekten mit WeChat-Miniprogrammen. Weitere Inhalte zu Deckeneffekten mit Miniprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!