Zwei Codezeilen implementieren die Kontaktseitenleiste des WeChat-Applets

高洛峰
Freigeben: 2017-02-20 15:33:04
Original
2072 Leute haben es durchsucht

1. Daten:

JSON-Array der Stadt, Buchstaben-Array

(Der erste Buchstabe im JSON-Array der Stadt wird von mir manuell platziert, Sie können ihn auch über eine for-Schleife abrufen. Der erste Das Zeichen von city_en wird automatisch hinzugefügt, aber um die Leistung zu steigern, habe ich auf Flexibilität verzichtet)

Zwei Codezeilen implementieren die Kontaktseitenleiste des WeChat-Applets

Zwei Codezeilen implementieren die Kontaktseitenleiste des WeChat-Applets

2. Layout: links Es ist Scrollview , und die rechte Seite ist die Seitenleiste. Wenn dieses Layout nicht gut ist, können Sie sich zunächst über das „Flex-Layout“ informieren.

Zwei Codezeilen implementieren die Kontaktseitenleiste des WeChat-Applets

item be Aktuelle Buchstaben

Zwei Codezeilen implementieren die Kontaktseitenleiste des WeChat-Applets

4. Stellen Sie den Seitenleistenabstand auf 50 Pixel vom oberen Rand und das Seitenleistenelement auf feste 20 Pixel ein. Dies ist erforderlich

.sideBar {
  width: 5%;
  margin-top: 50px;
}

.sideBar-item {
  height: 20px;
}
Nach dem Login kopieren

5. Fügen Sie in der Seitenleiste das Ereignis bindtouchmove hinzu (hauptsächlich, um pageY vom oberen Bildschirmrand abzurufen). Das Folgende ist die Idee:

 var pageY = get pageY in touchmove event e 

var letterIndex = (pageY - 50px vom oberen Rand der Seitenleiste)/Höhe des Seitenleistenelements 20px

 var letter = charArray[letterIndex];

Tatsächlicher Code:

   let letterIndex = (e.changedTouches["0"].pageY- 50) / 20;
   let letter = this.data.letterArray[letterIndex - 1];
Nach dem Login kopieren

Hier haben Sie den Buchstaben erhalten, den Sie mit dem Finger berührt haben

6. Verwenden Sie ein Scroll-Attribut. Ansicht, um den Buchstaben oben in der Scroll-Ansicht zu halten:


Scrollen-zur-Ansicht, Sie können seinen Wert auf eine ID festlegen,

Die ID Der ABCD-Index und andere Scrollview-Indizes sind eigentlich ABCD selbst. Übergeben Sie dann den im vierten Absatz erhaltenen Buchstaben an this.setData({toview:letter});

An dieser Stelle , können Sie sehen, wie sich die Liste ändert, indem Sie die Seitenleiste berühren.

7. Postscript-Prozess:


WeChat-Miniprogramme sind in letzter Zeit sehr beliebt, und ich habe auch versucht, eine Wettersoftware zu erstellen. , ich war ratlos, als ich die Seitenleiste der Städteliste erstellt habe

Verstehen Sie zunächst das Scroll-to-View-Attribut von Scrollview, weisen Sie diesem Attribut einen ID-Wert zu, dann wird die dem ID-Wert entsprechende Komponente platziert oben in der Scrollansicht, zum Beispiel:

Wenn die ID des Elements „Ganzhou“ ganzhou ist und Sie den Scroll-to-View-Wert auf ganzhou festlegen, wird Ganzhou oben als angezeigt sobald die Scrollansicht geöffnet wird.

Studieren Sie als Nächstes die „Ereignisse“ des WeChat-Applets. Zu den Ereignissen des WeChat-Applets gehören die folgenden

Zwei Codezeilen implementieren die Kontaktseitenleiste des WeChat-Applets

Probieren Sie sie aus Eins nach dem anderen Schließlich habe ich festgestellt, dass touchmove für mich am besten geeignet ist.

Da das touchmove-Ereignis die Komponenteninformationen der Berührungsposition zurückgibt, kann ich den ID-Wert basierend darauf ermitteln auf der Komponente und weisen Sie der Scroll-to-View den ID-Wert zu,

Aber es ist eigentlich nicht das, was ich dachte. Was es immer wieder zurückgibt, ist die Komponente, die mein Finger zum ersten Mal berührt hat.

Schließlich habe ich darüber nachgedacht, die Positionen der Seitenleiste und des Seitenleistenelements festzulegen und die Position des Buchstabens durch Berechnung zu ermitteln.

Weitere zwei Codezeilen zur Implementierung der WeChat-Applet-Kontaktseitenleiste finden Sie auf der chinesischen PHP-Website für verwandte Artikel!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!