Das WeChat-Applet implementiert feste Header- und Listentabellenkomponenten

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

  • Sortiertabelle
  • Der Header kann fixiert werden
  • Die erste Spalte ist fixiert (sie kann optimiert werden, indem die linke und rechte Seite der angegebenen Spalte so konfiguriert werden, dass sie fixiert ist).
  • Überwachung des Seitenumblätterns (zum Laden hochziehen)

Rendern

Umsetzungsideen

Ich 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:

  • Wenn die Tabelle nach links gleitet, gleitet die feste Spalte nach dem Verschieben um einen Bildschirm aus dem Bildschirm. Lösung: Stellen Sie die Breite der Tabelle dynamisch ein. Prinzip: Der Grund für das Herausschieben besteht darin, dass die gesamte Zeile aus dem Bildschirm herausgeschoben wird und der Sticky relativ zur linken Seite der gesamten Zeile positioniert ist.
  • Nachdem die Tabellenhöhe auf 100 % eingestellt wurde, schlägt die useReachBottom-Pull-Up-Überwachung fehl. Wenn die Tabellenhöhe höher eingestellt wird, schlägt der feste Header fehl. Lösung: Verwenden Sie ScrollView, um die Tabelle zu umschließen, und verwenden Sie onScrollToLower, um auf das Laden zu warten

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;
}

Zusammenfassen

Dies 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

>>:  SSM-Projekte werden häufig als War-Pakete bereitgestellt, wobei Tomcat und Maven zur Implementierung der Hot-Deployment-Konfiguration verwendet werden.

Artikel empfehlen

JS implementiert die zufällige Generierung von Bestätigungscodes

In diesem Artikelbeispiel wird der spezifische JS...

Üben Sie die Verwendung von Golang, um mit der Docker-API zu spielen

Inhaltsverzeichnis Installieren des SDK Lokalen D...

Interpretation und Verwendung verschiedener React-State-Manager

Zunächst müssen wir wissen, was ein Zustandsmanag...

Zusammenfassung der Web-Frontend-Kenntnisse (persönliche praktische Erfahrung)

1. Als ich heute eine Seite erstellte, stieß ich a...

Implementierungsmethode der rekursiven MySQL-Baumabfrage

Vorwort Bei baumstrukturierten Daten in der Daten...

isPrototypeOf-Funktion in JavaScript

Inhaltsverzeichnis 1. istPrototyp von() Beispiel ...

Halbtransparente Bildverarbeitung. Ideen und Code zur Implementierung von halbtransparentem Hintergrund.

Code kopieren Der Code lautet wie folgt: <!DOC...

So erben Sie die CSS-Zeilenhöhe

Wie wird die Zeilenhöhe vererbt?Schreiben Sie ein...

Eine kurze Erläuterung, wo das vom Knoten mithilfe von JWT generierte Token gespeichert werden soll

A: Normalerweise im Client gespeichert. jwt oder ...

Eine kurze Analyse zum besten Umgang mit vergessenen MySQL 8-Passwörtern

Vorwort Leser, die mit MySQL vertraut sind, werde...

Detaillierte Erläuterung der Docker Swarm-Dienstorchestrierungsbefehle

1. Einleitung Docker verfügt über ein Orchestrier...

Detaillierte Erklärung dieses Zeigeproblems in der JavaScript-Funktion

dieses Schlüsselwort Welches Objekt ruft die Funk...

Kreativer Eröffnungseffekt durch die Kombination von CSS 3.0 mit Video

Ich möchte Ihnen einen kreativen Einstieg vorstel...

Detaillierte Erläuterung des MySQL-Indexprinzips und der Abfrageoptimierung

Inhaltsverzeichnis 1. Einleitung 1. Was ist ein I...

So überwachen Sie MySQL mit Zabbix

Dokumentation zur Zabbix-Bereitstellung Nach der ...