Das WeChat-Applet implementiert feste Header- und Listentabellenkomponenten

Inhaltsverzeichnis

brauchen:
Funktionspunkte
Rendern
Umsetzungsideen
Spezifischer Code (react\taro3.0)
Spezifischer Code (Mini-Programm nativ)
Zusammenfassen

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.

Ein Artikel zum Erlernen von Fähigkeiten zur Optimierung von MySQL-Indexabfragen

Das WeChat-Applet implementiert feste Header- und Listentabellenkomponenten

Inhaltsverzeichnis

brauchen:

Funktionspunkte

Rendern

Umsetzungsideen

Spezifischer Code (react\taro3.0)

Spezifischer Code (Mini-Programm nativ)

Zusammenfassen

Ein Artikel zum Erlernen von Fähigkeiten zur Optimierung von MySQL-Indexabfragen

Das Implementierungsprinzip des Zabbix-Sammelskripts zur dynamischen Ausführungsüberwachung

Eine kurze Analyse von MySQL - MVCC

Aktivierungsmethode für Windows Service 2016 Datacenter\Stand\Embedded (2021)

Das neueste, äußerst detaillierte grafische Tutorial zur Installation von Kali Linux auf der virtuellen Maschine VMware

12 Arten der Komponentenkommunikation in Vue2

Analyse der Implementierungsmethoden für MySQL-Datensicherung und -Wiederherstellung

Verwenden von js zur Realisierung eines dynamischen Hintergrunds

Zwei Boxmodelle in Webseiten (W3C-Boxmodell, IE-Boxmodell)

React+axios implementiert die Suchbenutzerfunktion von GitHub (Beispielcode)

Artikel empfehlen

Erläuterung zum Lastenausgleich und Reverseproxy von Nginx

Kennen Sie den Unterschied zwischen leerem Wert und Nullwert in MySQL

Die Verwendung von Ankerpunkten in HTML_PowerNode Java Academy

JavaScript fügt Prototyp-Methodenimplementierung für integrierte Objekte hinzu

Der einfachste Weg, das MySQL-Root-Passwort zurückzusetzen

Detaillierte Erklärung der HTML-Ereignisse „onfocus gain focus“ und „onblur lose focus“

Was ist die Datei mysql-bin.000001 in MySQL? Kann sie gelöscht werden?

MySql Group By implementiert die Gruppierung mehrerer Felder

Vue verwendet Openlayers zum Laden von Tiandi Map und Amap

JavaScript zum Erzielen eines Lupeneffekts

Beispielcode zur Implementierung von Anti-Shake in Vue

Verwenden Sie Angular CDK, um eine Service-Popup-Toast-Komponentenfunktion zu implementieren

So verhindern Sie Event-Bubbling in JavaScript

Spezifische Verwendung des Autoindex-Moduls in der Nginx-HTTP-Modulreihe

So rufen Sie das VMware Esxi-Root-Passwort erfolgreich ab, wenn Sie es vergessen haben