Die Scroll-Ansicht des WeChat-Applets realisiert die Verknüpfung nach links und rechts
|
In diesem Artikel wird der spezifische Code für die Scroll-Ansicht des WeChat-Applets zur Erzielung einer Links- und Rechtsverknüpfung zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Anforderungen: Das Projekt stellt eine Anforderung zur Städteauswahl. Diese erfordert, dass alle Provinzen, Städte und Bezirke des Landes nach dem Anfangsbuchstaben des chinesischen Alphabets klassifiziert und sortiert werden und dass die Städteliste links und die Buchstabenliste rechts bidirektional verknüpft sind.
Schritt 1 : Rufen Sie gemäß der vom JavaScript SDK von Tencent bereitgestellten Schnittstelle alle Provinzen, Städte und Bezirke ab und sortieren Sie sie nach dem Anfangsbuchstaben.
lass _this = dies;
_this.mapCtx = wx.createMapContext("meineMap");
// Instanziieren Sie die API-Kernklasse qqmapsdk = new QQMapWX({
Schlüssel: MAP_KEY,
});
// Nationale Städteliste abrufen qqmapsdk.getCityList({
Erfolg: Funktion (res) {
let list = res.result[0].concat(res.result[1], res.result[2]);
_this.allCity = Liste;
_this.cityList = _this.pySegSort(Liste);
},
fehlgeschlagen: Funktion (Fehler) {
konsole.fehler(fehler);
},
vollständig: Funktion (res) {
konsole.log(res);
},
});
pySegSort(arr) {
wenn (!String.prototype.localeCompare) null zurückgibt;
let letters = "*ABCDEFGHJKLMNOPQRSTWXYZ".split("");
let zh = „Das ist ein sehr einfacher und eleganter Satz. Ich werde ihn hier aufschreiben. Ich bin nicht …
lass segs = [];
lass curr;
Buchstaben.fürJeden(Funktion (Element, i) {
curr = { Buchstabe: Artikel, ID: Artikel, Daten: [] };
arr.forEach(Funktion (Element2) {
Wenn (
(!zh[i - 1] || zh[i - 1].localeCompare(item2.fullname) <= 0) &&
item2.vollständigername.localeCompare(zh[i]) == -1
) {
aktuell.data.push(item2);
}
});
wenn (aktuelle.Daten.Länge) {
aktuelle.Daten.Sortieren(Funktion (a, b) {
gibt a.vollständigerName.localeCompare(b.vollständigerName) zurück;
});
segs.push(aktuell);
}
});
Segmente zurückgeben;
},Schritt 2: Berechnen Sie die Höhe der Liste, die aus jedem Anfangsbuchstaben besteht Wenn Sie query.selectAll('.cityList') verwenden, sollten Sie es für den asynchronen Abruf in setTimeout setzen, da die Seite sonst noch nicht geladen wurde und nicht abgerufen werden kann. Sie können es nicht abrufen, selbst wenn Sie versuchen, $nextTick() zu verwenden.
// Höhe der Box mit den beliebtesten Städten abrufen let query = wx.createSelectorQuery().in(this);
Abfrage
.Wählen Sie (".heiße Stadt")
.boundingClientRect((Daten) => {
this.hotCityHeight = Daten.Höhe;
})
.exec();
// Blockhöhe jeder Buchstabenkategorie abrufen setTimeout(() => {
Lassen Sie die Abfrage = wx.createSelectorQuery().in(this);
Abfrage
.selectAll(.cityList")
.boundingClientRect((Daten) => {
console.log(data, „die Höhe jeder Stadtklassifizierung“);
this.letterBoxHeight = Daten;
dies.heightArr = dies.getHeight();
})
.exec();
}, 1000); // Benutze setTimeout für die asynchrone Erfassung, sonst kann es nicht erreicht werden // Berechne die Höhe jedes Bereichs getHeiht() {
lass n = diese.hotCityHeight;
sei arr = [];
dies.letterBoxHeight.forEach((item) => {
n = n + Artikelhöhe;
arr.push(n);
});
Rückflug an;
},Schritt 3: Klicken Sie auf die rechte Seite, um die Verknüpfung auf der linken Seite anzuzeigen. Wenn Sie auf die Buchstabenliste rechts klicken, wird die Städteliste links in den sichtbaren Bereich gescrollt. In diesem Fall ist scroll-into-view="childViewId" erforderlich.
// Klicken Sie auf den Buchstaben rechts letterClick(letter, i) {
dieser.letterIndex = i;
dies.aktuellerIndex = i;
this.childViewId = Brief;
setzeTimeout(() => {
dieser.letterIndex = -1;
}, 500); // Der anfängliche Kreis verschwindet nach 0,5 Sekunden},Schritt 4: Auf der linken Seite verschieben und die rechten Seiten verbinden. Beim Verschieben der Städteliste ist die aktuelle Scrollhöhe sowie der Buchstabenbereich zu ermitteln, innerhalb dessen die Buchstaben hervorgehoben werden sollen.
berechneIndex(arr, scrollHeight) {
lass index = "";
für (sei i = 0; i < arr.length; i++) {
wenn (scrollHeight >= this.hotCityHeight && scrollHeight < arr[0]) {
Index = 0;
} sonst wenn (scrollHeight >= arr[i - 1] und scrollHeight < arr[i]) {
Index = i;
}
}
Rückgabeindex;
},
// Scrolldistanz berechnen scroll(e) {
let scrollTop = e.detail.scrollTop;
lass scrollArr = this.heightArr;
let index = this.calculateIndex(scrollArr, scrollTop);
dies.aktuellerIndex = Index;
},Der vollständige Code lautet wie folgt:
erstellt() {
lass _this = dies;
_this.mapCtx = wx.createMapContext("meineMap");
// Instanziieren Sie die API-Kernklasse qqmapsdk = new QQMapWX({
Schlüssel: MAP_KEY,
});
// Nationale Städteliste abrufen qqmapsdk.getCityList({
Erfolg: Funktion (res) {
let list = res.result[0].concat(res.result[1], res.result[2]);
_this.allCity = Liste;
_this.cityList = _this.pySegSort(Liste);
},
fehlgeschlagen: Funktion (Fehler) {
konsole.fehler(fehler);
},
vollständig: Funktion (res) {
konsole.log(res);
},
});
},
montiert() {
// Höhe der Box mit den beliebtesten Städten abrufen let query = wx.createSelectorQuery().in(this);
Abfrage
.Wählen Sie (".heiße Stadt")
.boundingClientRect((Daten) => {
this.hotCityHeight = Daten.Höhe;
})
.exec();
// Blockhöhe jeder Buchstabenkategorie abrufen setTimeout(() => {
Lassen Sie die Abfrage = wx.createSelectorQuery().in(this);
Abfrage
.selectAll(.cityList")
.boundingClientRect((Daten) => {
console.log(data, „die Höhe jeder Stadtklassifizierung“);
this.letterBoxHeight = Daten;
dies.heightArr = dies.getHeight();
})
.exec();
}, 1000);
},
Methoden: {
// Städteliste alphabetisch sortieren pySegSort(arr) {
wenn (!String.prototype.localeCompare) null zurückgibt;
let letters = "*ABCDEFGHJKLMNOPQRSTWXYZ".split("");
let zh = „Das ist ein sehr einfacher und eleganter Satz. Ich werde ihn hier aufschreiben. Ich bin nicht …
lass segs = [];
lass curr;
Buchstaben.fürJeden(Funktion (Element, i) {
curr = { Buchstabe: Artikel, ID: Artikel, Daten: [] };
arr.forEach(Funktion (Element2) {
Wenn (
(!zh[i - 1] || zh[i - 1].localeCompare(item2.fullname) <= 0) &&
item2.vollständigername.localeCompare(zh[i]) == -1
) {
aktuell.data.push(item2);
}
});
wenn (aktuelle.Daten.Länge) {
aktuelle.Daten.Sortieren(Funktion (a, b) {
gibt a.vollständigerName.localeCompare(b.vollständigerName) zurück;
});
segs.push(aktuell);
}
});
Segmente zurückgeben;
},
// Klicken Sie auf den Buchstaben rechts letterClick(letter, i) {
dieser.letterIndex = i;
dies.aktuellerIndex = i;
this.childViewId = Brief;
setzeTimeout(() => {
dieser.letterIndex = -1;
}, 500);
},
// Berechnen Sie die Höhe jedes Bereichs getHeiht() {
lass n = diese.hotCityHeight;
sei arr = [];
dies.letterBoxHeight.forEach((item) => {
n = n + Artikelhöhe;
arr.push(n);
});
Rückflug an;
},
berechneIndex(arr, scrollHeight) {
lass index = "";
für (sei i = 0; i < arr.length; i++) {
wenn (scrollHeight >= this.hotCityHeight && scrollHeight < arr[0]) {
Index = 0;
} sonst wenn (scrollHeight >= arr[i - 1] und scrollHeight < arr[i]) {
Index = i;
}
}
Rückgabeindex;
},
// Scrolldistanz berechnen scroll(e) {
let scrollTop = e.detail.scrollTop;
lass scrollArr = this.heightArr;
let index = this.calculateIndex(scrollArr, scrollTop);
dies.aktuellerIndex = Index;
},
}
<scroll-view scroll-y style="Höhe: 1400rpx" :scroll-into-view="childViewId" @scroll="scroll">
<!-- Beliebte Städte-->
<Ansichtsklasse="Hot-City">
<p>Beliebte Städte</p>
<ul>
<li
v-for="(Artikel, idx) in hotCityList"
:Schlüssel="idx"
:Klasse="festePosition === Element ? 'ausgewählt' : ''"
@click="Stadt auswählen(Element)"
>
{{ Artikel }}
</li>
</ul>
</Ansicht>
<!-- Alphabetische Liste -->
<Ansichtsklasse="letterAz">
<Ansicht
v-for="(Artikel, idx) in BuchstabeAz"
:Schlüssel="idx"
Klasse = "Briefartikel"
:Klasse="currentIndex === idx ? 'ausgewählt' : ''"
@click="Buchstabenklick(Element, idx)"
>
{{ Artikel }}
<view v-show="letterIndex === idx" class="pop-item">{{ item }}</view>
</Ansicht>
</Ansicht>
<!-- Liste der Städte -->
<view v-for="(item, idx) in cityList" :key="idx" class="cityList">
<view :id="item.id" class="city-letter">{{ item.letter }}</view>
<view v-for="ele in item.data" :key="ele.id" class="city-name" @click="selectCity(ele.fullname)">{{
ele.vollständiger Name
}}</view>
</Ansicht>
</scroll-ansicht>
// Beliebte Städte.Hot-City {
Polsterung: 38rpx 32rpx;
P {
Schriftgröße: 28rpx;
Zeilenhöhe: 40rpx;
Farbe: #999999;
Rand unten: 32rpx;
}
ul {
Anzeige: Flex;
Flex-Wrap: Umwickeln;
& li {
Hintergrund: rgba(0, 0, 0, 0,04);
Rahmenradius: 16rpx;
Schriftgröße: 28rpx;
Farbe: #000000;
Textausrichtung: zentriert;
Rand: 8rpx;
Polsterung: 16rpx 46rpx;
}
& li.ausgewählt {
Hintergrund: rgba (45, 200, 77, 0,12);
Rand: 0,66rpx durchgezogen #046a38;
Farbe: #046a38;
}
}
}
// Alphabetische Liste.BuchstabeAz {
Position: fest;
rechts: 29rpx;
oben: 380rpx;
Schriftgröße: 20rpx;
Zeilenhöhe: 28rpx;
Farbe: rgba(0, 0, 0, 0,55);
.Brief-Artikel {
Position: relativ;
Rand oben: 4rpx;
.pop-Element {
Position: absolut;
rechts: 165%;
unten: -100 %;
Breite: 96rpx;
Höhe: 96rpx;
Hintergrund: #ffffff;
Rand: 0,66rpx durchgezogen rgba (0, 0, 0, 0,12);
Box-Größe: Rahmenbox;
Kastenschatten: 0 10rpx 24rpx rgba (0, 0, 0, 0,08);
Randradius: 100 %;
Textausrichtung: zentriert;
Zeilenhöhe: 96rpx;
Schriftgröße: 40rpx;
Farbe: rgba(0, 0, 0, 0,85);
}
}
.letter-item.ausgewählt {
Farbe: #046a38;
}
}
// Städteliste.cityList {
Rand links: 32rpx;
Rand rechts: 66rpx;
Rand oben: 20rpx;
.Stadtbuchstabe {
Schriftgröße: 28rpx;
Zeilenhöhe: 40rpx;
Farbe: #999999;
}
.Stadtname {
Schriftgröße: 28rpx;
Zeilenhöhe: 40rpx;
Farbe: #000000;
Polsterung: 32rpx 0;
Rahmen unten: 2rpx durchgezogen rgba (0, 0, 0, 0,12);
}
}Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Implementierung der Docker-Batch-Container-Orchestrierung
Artikel empfehlen
Beispiel einer Vorrendering-Methode für eine Vue-Einzelseitenanwendung
Inhaltsverzeichnis Vorwort vue-cli 2.0 Version vu...
Konfigurationsschritte für die MySQL-Gruppenreplikation (empfohlen)
MySQL-Group-Replication ist eine neue Funktion, d...
Beispielcode zur Verwendung der Elementkalenderkomponente in Vue
Schauen Sie sich zunächst das Wirkungsdiagramm an...
Zusammenfassung der Wissenspunkte zur Verwendung berechneter Eigenschaften in Vue
Berechnete Eigenschaften Manchmal packen wir zu v...
Detaillierte Erklärung der Grundkonzepte von HTML
Was ist HTML? HTML ist eine Sprache zur Beschreib...
Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue und Verwendung von Sync zum Synchronisieren der Daten übergeordneter und untergeordneter Komponenten
Inhaltsverzeichnis Vorwort Untergeordnete Kompone...
VUE + OPENLAYERS erreicht Echtzeit-Positionierungsfunktion
Inhaltsverzeichnis Vorwort 1. Etikettenstil defin...
Javascript implementiert die Webversion des Flipperspiels
Das mit JavaScript-Objekten und -Methoden impleme...
Einige Schlussfolgerungen zur Gestaltung von Portal-Website-Fokusbildern
Fokusbilder sind eine Möglichkeit, Inhalte zu präs...
Lösung für das Problem, dass Docker-Protokolle nicht abgerufen werden können
Als ich den Dienst täglich überprüfte und mir die...
Tiefes Verständnis der Verwendung von ::before/:before und ::after/:after
Teil 1: Grundlagen 1. Im Gegensatz zu Pseudoklass...
Verschiedene Methoden zum Implementieren der Eingabeaufforderungsfunktion eines Textfelds in HTML
Sie können das Attribut in HTML5 verwenden <inp...
Schreiben Sie einen formellen Blog mit XHTML CSS
Der vollständige Name von Blog sollte Weblog sein...
Beispiel für die Implementierung von QR-Code-Scaneffekten mit CSS3
Online-Vorschau https://jsrun.pro/AafKp/ Erster B...
Linux (Center OS7) installiert JDK, Tomcat und MySQL, um eine Ausführungsumgebung für Java-Webprojekte zu erstellen.
1. JDK installieren 1. Deinstallieren Sie die alt...