Das WeChat-Applet implementiert feste Header- und Listentabellenkomponenten
brauchen:Das WeChat-Applet implementiert feste Kopfzeilen- und feste Spaltentabellenkomponenten (mit einigen geringfügigen Änderungen auf mobilen Endgeräten anwendbar) Funktionspunkte
Rendern
UmsetzungsideenIch begann darüber nachzudenken, drei ScrollViews zu verwenden, um eine Scroll-Verknüpfung zu implementieren. Wenn Kopfzeile und Spalten fixiert sind, sollten Kopfzeile und Spalten entsprechend scrollen, wenn der Tabelleninhalt gescrollt wird. Nachdem ich eine Demo geschrieben hatte, stellte ich fest, dass es sehr schwierig wäre, die Positionsinformationen einer ScrollView zu überwachen, um die Position der anderen beiden ScrollViews festzulegen, und die Erfahrung war äußerst schlecht. Verwenden Sie position: sticky;, damit die Kopfzeile oben in der Tabelle haftet und das erste Element jeder Zeile an der linken Seite der aktuellen Zeile haftet. Aufgetretene Probleme:
Spezifischer Code (react\taro3.0)index.tsx
/**
* Verschiebbare Tabellenkomponenten mit fester Kopfzeile und festen Spalten* @example <Table data={data} dataAttribute={dataAttribute} sortTypeChange={sortTypeChange} handleRow={toDetails}/>
*/
importiere React, { useState, useMemo, useEffect } von 'react'
Klassennamen aus „Klassennamen“ importieren
// Komponenten
importiere { Ansicht, Text, ScrollView } aus '@tarojs/components'
// Dienstprogramme
importiere { noop } von '@/utils/util'
// Stile
Stile aus „./index.module.less“ importieren
Schnittstelle DataAttributeItem {
Titel: Zeichenfolge
Schlüssel: Zeichenfolge | Zahl
Sortierschlüssel?: Zeichenfolge | Zahl
}
Schnittstelle Requisiten {
Daten: Array<beliebig>
Datenattribut: Array<DataAttributeItem>
sortTypeChange?: (sort_item_id: beliebig, sort_desc: boolesch) => void
handleRow?: (Daten: beliebig) => void
handleScrollToLower?: (e: beliebig) => void
}
exportiere Standardfunktion Table(props: Props) {
const { Daten, Datenattribut, SortTypeChange = noop, HandleRow = noop, HandleScrollToLower = noop } = Eigenschaften
const [isSortDesc, setIsSortDesc] = useState<boolean>(true)
const [sortIndex, setZahlSortIndex] = useState<Zahl>(1)
const Tabellenbreite = useMemo(() => {
gibt `${(dataAttribute.length * 148 + 48)}rpx` zurück
}, [Datenattribut])
const tableHeight = useMemo(() => {
gibt `${((data.length + 1) * 96)}rpx` zurück
}, [Daten])
const handleSortItem = (attrItem, attrIndex) => {
wenn (attrIndex === 0) {
zurückkehren
}
const vorIndex = sortIndex
const sortKey = attrItem.sortKey
Datenattribut.map((Element, Index)=>{
wenn (Element.Sortierungsschlüssel === Sortierungsschlüssel) {
wenn (vorIndex === Index) {
setIsSortDesc(!isSortDesc)
} anders {
setzeSortIndex(index)
setIsSortDesc(true)
}
}
})
}
Effekt verwenden(()=>{
const sort_desc = isSortDesc
const sort_item_id = dataAttribute[sortIndex].sortKey
sortTypeChange(Sortierungselement-ID,Sortierungsbeschreibung)
},[SortIndex, isSortDesc])
zurückkehren (
<ScrollView Klassenname={Stile['Tabelle']} scrollY scrollX onScrollToLower={handleScrollToLower}>
<Ansichtsklassenname={styles['sticky-box']} style={{height: tableHeight}}>
<Ansichtsklassenname={styles['grey-box']} style={{width: tableWidth, position: 'sticky'}}/>
<Ansichtsklassenname={styles['table__head']} style={{width: tableWidth, position: 'sticky'}}>
{dataAttribute.map((attrItem, attrIndex) => (
<Ansicht Klassenname={styles['table__head__td']} Schlüssel={attrIndex} beiKlick={()=>handleSortItem(attrItem, attrIndex)}>
<Text
Klassenname = {Klassennamen ({
[Stile['table__head__td__text']]: wahr,
[Stile['table__head__td__text-active']]: sortIndex === attrIndex,
})}
Schlüssel={attrIndex}
>{attrItem.title}</Text>
{attrIndex !== 0 && <Ansicht
Klassenname = {Klassennamen ({
[Stile['table__head__td__sorter-indicate']]: wahr,
[styles['table__head__td__sorter-indicate--asc-active']]: sortIndex === attrIndex && !isSortDesc,
[Stile['table__head__td__sorter-indicate--desc-active']]: sortIndex === attrIndex && isSortDesc
})}
/>}
</Anzeigen>
))}
</Anzeigen>
{data.map((Datenelement, Datenindex) => (
<Ansicht Klassenname={Stile['table__row']} Schlüssel={Datenindex} Stil={{Breite: Tabellenbreite}} bei Klick={() => handleRow(Datenelement)}>
{dataAttribute.map((attrItem, attrIndex) => {
zurückkehren (
<Text Klassenname = {Stile ['table__row__td']} Schlüssel = {attrIndex}> {Datenelement [attrItem.key] || '-'}</Text>
)
})}
</Anzeigen>
))}
</Anzeigen>
</ScrollView>
)
}
index.module.less
@import '~@/assets/style/mixins/ellipsis.less';
Seite{
Schriftgröße: 26rpx;
Zeilenhöhe: 60rpx;
Farbe: #222;
Höhe: 100%;
Breite: 100 %;
}
.graue Box{
Höhe: 10rpx;
oben: 0;
Hintergrund: #f8f8f8;
Z-Index: 100;
}
.Tisch{
Position: relativ;
Überlauf: scrollen;
Breite: 100 %;
Höhe: 100%;
Überlauf: scrollen;
&__Kopf{
Position: relativ;
Höhe: 96rpx;
Leerzeichen: Nowrap;
// Position: klebrig;
oben: 10rpx;
Z-Index: 100;
Höhe: 88rpx;
Schriftgröße: 24rpx;
Zeilenhöhe: 88rpx;
Farbe: #aaabbd;
Hintergrundfarbe: #f8f8f8;
Rahmen unten: 2rpx durchgezogen #ecf1f8;
Hintergrundfarbe: #fff;
Leerzeichen: Nowrap;
Anzeige: Flex;
&__td{
.Ellipse();
Breite: 148rpx;
// Polsterung rechts: 40rpx;
Anzeige: Flex;
Inhalt ausrichten: Flex-Start;
Elemente ausrichten: zentrieren;
Hintergrundfarbe: #fff;
Position: relativ;
Box-Größe: Rahmenbox;
&:n-tes-Kind(1) {
Polsterung links: 24rpx;
Breite: 154rpx;
Rand rechts: 40rpx;
Position: klebrig;
Z-Index: 10;
links: 0;
}
&__Text{
Anzeige: inline;
&-aktiv{
Farbe: #6d70ff;
}
}
&__sorter-indizieren{
Breite: 24rpx;
Höhe: 24rpx;
Anzeige: Inline-Block;
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 100 % 100 %;
Hintergrundbild: URL('https://icon1.png');
&--asc-aktiv {
Hintergrundbild: URL('https://icon2.png');
}
&--desc-aktiv {
Hintergrundbild: URL('https://icon3.png');
}
}
}
}
&__Reihe{
Position: relativ;
Höhe: 96rpx;
Leerzeichen: Nowrap;
Anzeige: Flex;
Inhalt ausrichten: Flex-Start;
Elemente ausrichten: zentrieren;
Rahmen unten: 2rpx durchgezogen #ecf1f8;
&__td{
// .ellipsis();
Überlauf: scrollen;
Leerzeichen: Nowrap;
Breite: 148rpx;
// Polsterung rechts: 40rpx;
Anzeige: Inline-Block;
Hintergrundfarbe: #fff;
Position: relativ;
Box-Größe: Rahmenbox;
Schriftgröße: 26rpx;
Zeilenhöhe: 96rpx;
&:n-tes-Kind(1) {
Rand rechts: 40rpx;
Polsterung links: 24rpx;
Breite: 154rpx;
Position: klebrig;
Z-Index: 10;
links: 0;
}
}
}
}
Spezifischer Code (Mini-Programm nativ)
<ScrollView Klasse="Tabelle" scroll-x scroll-y bindscrolltolower="handleScrollToLower">
<Ansicht Klasse="sticky-box" Stil="Höhe:{{tableHeight}}rpx;">
<Ansicht Klasse="table__head" Stil="width:{{tableWidth}}rpx;">
<Ansichtsklasse="table__head__td" wx:for="{{dataAttribute}}" wx:key="attrIndex" wx:for-index="attrIndex" wx:for-item="attrItem">
<Text
Klasse = "table__head__td__text"
>{{attrItem.title}}</Text>
</Anzeigen>
</Anzeigen>
<Ansichtsklasse="table__row" wx:for="{{data}}" wx:key="dataIndex" wx:for-index="dataIndex" wx:for-item="dataItem" style="width:{{tableWidth}}rpx;">
<Text class="table__row__td" wx:for="{{dataAttribute}}" wx:key="dataIndex" wx:for-index="attrIndex" wx:for-item="attrItem">{{dataItem[attrItem.key] || '-'}}</Text>
</Anzeigen>
</Anzeigen>
</ScrollView>
const app = getApp()
Seite({
Daten: {
Daten: [
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
{
eine: 123,
b: 456,
c: 489,
d: 789,
e: 458,
f: 789
},
],
Datenattribut: [
{
Titel: 'Erste Spalte',
Taste: „a“
},
{
Titel: 'Spalte 2',
Taste: „b“
},
{
Titel: 'Spalte 3',
Taste: „c“
},
{
Titel: 'Spalte 4',
Taste: „d“
},
{
Titel: 'Spalte 5',
Taste: „e“
},
{
Titel: 'Spalte 6',
Taste: 'f'
}
],
Tischhöhe: (20 + 1) * 96,
Tischbreite: 200 * 6 + 60
}
})
Seite{
Schriftgröße: 26rpx;
Zeilenhöhe: 60rpx;
Farbe: #222;
Höhe: 100%;
Breite: 100 %;
}
.Tisch{
Anzeige: Block;
Position: relativ;
Überlauf: scrollen;
Breite: 100 %;
Höhe: 100%;
}
.klebrige Box{
}
.table__head{
Höhe: 96rpx;
Leerzeichen: Nowrap;
Position: klebrig;
oben: 0rpx;
Z-Index: 100;
Höhe: 88rpx;
Schriftgröße: 24rpx;
Zeilenhöhe: 88rpx;
Farbe: #aaabbd;
Hintergrundfarbe: #f8f8f8;
Rahmen unten: 2rpx durchgezogen #ecf1f8;
Hintergrundfarbe: #fff;
Leerzeichen: Nowrap;
Anzeige: Flex;
}
.table__head__td{
Breite: 200rpx;
Anzeige: Flex;
Inhalt ausrichten: Flex-Start;
Elemente ausrichten: zentrieren;
Hintergrundfarbe: #fff;
Box-Größe: Rahmenbox;
Position: relativ;
Überlauf: versteckt;
Leerzeichen: Nowrap;
-o-text-overflow:Auslassungspunkte;
Textüberlauf: Auslassungspunkte;
}
.table__head__td:n-tes-Kind(1) {
Polsterung links: 24rpx;
Breite: 260rpx;
Rand rechts: 40rpx;
Position: klebrig;
Z-Index: 101;
links: 0rpx;
}
.table__head__td__text{
Anzeige: inline;
}
.table__row{
Position: relativ;
Höhe: 96rpx;
Leerzeichen: Nowrap;
Anzeige: Flex;
Inhalt ausrichten: Flex-Start;
Elemente ausrichten: zentrieren;
Rahmen unten: 2rpx durchgezogen #ecf1f8;
}
.table__row__td{
Überlauf: scrollen;
Leerzeichen: Nowrap;
Breite: 200rpx;
Anzeige: Inline-Block;
Hintergrundfarbe: #fff;
Box-Größe: Rahmenbox;
Schriftgröße: 26rpx;
Zeilenhöhe: 96rpx;
Position: relativ;
Überlauf: versteckt;
Leerzeichen: Nowrap;
-o-text-overflow:Auslassungspunkte;
Textüberlauf: Auslassungspunkte;
}
.table__row__td:n-tes-Kind(1) {
Rand rechts: 40rpx;
Polsterung links: 24rpx;
Breite: 260rpx;
Position: klebrig;
Z-Index: 10;
links: 0;
}
ZusammenfassenDies ist das Ende dieses Artikels über die Implementierung von festen Headern und Tabellenkomponenten in WeChat Mini-Programmen. Weitere relevante Inhalte zu festen Headern in WeChat Mini-Programmen 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! |
<<: Detaillierte Erläuterung des Implementierungsprinzips von ACID-Transaktionen in MySQL
Artikel empfehlen
Detaillierte Erklärung zum schnellen Erstellen einer Blog-Website mit Docker
Inhaltsverzeichnis 1. Vorbereitung 2. Bereitstell...
Fassen Sie einige häufige Rankingprobleme in MySQL zusammen
Vorwort: In manchen Anwendungsszenarien stoßen wi...
docker-maven-plugin verpackt das Image und lädt es in ein privates Warehouse hoch
Inhaltsverzeichnis 1. Einführung in das Docker-Ma...
10 Aspekte, die beim Entwurf und Aufbau einer umfangreichen Website-Architektur berücksichtigt werden müssen
Wir diskutieren hier nicht über PHP-, JSP- oder ....
Grundlegendes Installationstutorial zum Dekomprimieren von MySQL-Paketen
Da ich auf einen neuen Computer gewechselt bin, m...
Das Homepage-Design spiegelt am besten das Niveau des Webdesigners wider
Bei den vielen Projekten, an denen ich mitgearbei...
Anweisung zur Ermittlung der Browserversion und Kompatibilität mit mehreren Browsern
<!--[wenn lte IE 6]> <![endif]--> Sich...
Detaillierte Erläuterung der Docker Fast Build- und Alibaba Cloud-Containerbeschleunigungskonfiguration in der Windows 7-Umgebung
Im vorherigen Artikel zu Docker wurde die Konstru...
Beispiele für optimistisches und pessimistisches Sperren in MySQL
Die Aufgabe der Parallelitätskontrolle in einem D...
Führen Sie die folgenden Schritte aus, damit Docker Images abrufen kann
1. Docker Pull zieht das Image Wenn Sie zum Abruf...
Verwenden von Keras zur Beurteilung von SQL-Injection-Angriffen (Beispielerklärung)
In diesem Artikel wird das Deep-Learning-Framewor...
Detaillierte Erklärung zum Ändern des Standardstils der externen Komponente Vant basierend auf der Vue-CLI-Entwicklung
Inhaltsverzeichnis Vorwort 1. Weniger 2. Importie...
Der Unterschied und die Verwendung von json.stringify() und json.parse()
1. Unterschiede zwischen JSON.stringify() und JSO...
In HTML eingebettetes Flash Lösung zum Einbetten von Flash-Dateien in den HTML-Webseitencode (Teil 1)
Nach chinesischem Brauch feiern wir das neue Jahr...
So verwenden Sie async und await in JS
Inhaltsverzeichnis 1. asynchron 2. warten: 3. Umf...