Beispiele für zwei Möglichkeiten zur Implementierung einer horizontalen Bildlaufleiste

Vorwort:

Während der Projektentwicklung stießen wir auf die Anforderung, eine horizontale Bildlaufleiste zu implementieren, wenn sich zu viele Navigationsleisten in einer Zeile befinden. Als ich mit der Arbeit an dem Projekt begann, war die Zeit zu knapp und ich war in Eile. Ich dachte, es gäbe im Internet fertige Lösungen, aber als ich suchte, fand ich keine, also musste ich sie selbst schreiben. Am Anfang verwendete ich normales CSS+JS, um die Funktionen zu implementieren. Später lernte ich Flex-Layout, also dachte ich daran, Flex zu verwenden, um die horizontale Bildlaufleiste zu implementieren. Diese beiden Methoden werden zur späteren Bezugnahme aufgezeichnet.

Text:

Beide Methoden haben ihre eigenen Vorteile. Wenn Sie keine Kompatibilitätsprobleme haben, sollten Sie Flex verwenden. Schließlich gefällt mir immer noch das Sprichwort: Weniger schreiben, mehr tun. Ha ha

html:

<div Klasse="nav_wrap">
    <ul Klasse="nav_mine">
        <li class="nav_item">Alle</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">Microsoft</li>
        <li class="nav_item">Buchhaltung</li>
        <li class="nav_item">Malerei</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">Microsoft</li>
        <li class="nav_item">Buchhaltung</li>
        <li class="nav_item">Malerei</li>
    </ul>
</div>
<script src="node_modules/jQuery/tmp/jquery.js"></script>

Ein reines CSS + JQuery, um eine horizontale Bildlaufleiste zu erzielen (natives JS kann erzielt werden, der Einfachheit halber wird jQuery verwendet)

CSS:

* {
    Box-Größe: Rahmenbox;
    Rand: 0;
    Polsterung: 0
}
.nav_wrap{
    Überlauf-x: scrollen;
}
.nav_mine {
    Polsterung: 15px 10px;
    Rahmen unten: 1px durchgezogen #aca9a7;
    Höhe: 75px;
    Überlauf-x: scrollen;
    Überlauf-y: versteckt;
}

.nav_mine .nav_item {
    Rand: 1px durchgezogen #1a110b;
    Rahmenradius: 40px;
    Farbe: #aca9a7;
    Rand rechts: 10px;
    Schriftgröße: 24px;
    Polsterung: 4px 18px;
    schweben: links;
    Listenstil: keiner;
}

js-Code:

$(Funktion(){
    var Breite = 0;
    für (lass i = 0; i < $('.nav_item').length; i++) {
        Breite += $('.nav_item').eq(i).outerWidth(true);
    }
    $('.nav_mine').width(width+20); //Breite ist nur die Breite des Inhalts, die Breite der Polsterung muss hinzugefügt werden})

PS: Der Grund, warum JS verwendet wird, ist, dass wir nicht wissen, wie viele Registerkarten vorhanden sind. Daher kann die Breite nicht fest codiert werden. Wir können nur die Breite der Registerkarten dynamisch ermitteln und sie dann addieren, um die Gesamtbreite zu erhalten. Dies ist praktisch für die Mehrfachverwendung. outerWidth plus der Parameter true bedeutet, dass die Breite Polsterung, Rand und Rahmen umfasst.

2. CSS3 -- flex

CSS:

* {
    Box-Größe: Rahmenbox;
}

.nav_mine {
    Polsterung: 15px 20px;
    Rahmen unten: 1px durchgezogen #aca9a7;
    Höhe: 75px;
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Überlauf-y: versteckt;
    Flex-Wrap: Nowrap;
}

.nav_mine .nav_item {
    Rand: 1px durchgezogen #aca9a7;
    Rahmenradius: 40px;
    Farbe: #aca9a7;
    Rand rechts: 22px;
    Schriftgröße: 24px;
    Polsterung: 4px 18px;
    Listenstil: keiner;
    Leerzeichen: Nowrap;
}

Bei Leerzeichen habe ich ein Problem festgestellt, wenn das Element white-space:nowrap nicht verwendet. Wenn die Breite nicht festgelegt ist, wird ein Wort nicht umbrochen, chinesische Schriftzeichen jedoch schon. Ich dachte, es hänge mit display:flex zusammen. Nachdem ich online nachgeschaut hatte, fand ich heraus, dass white-space das Leerzeichen betrachtet, um zu erkennen, ob ein Zeilenumbruch erfolgen soll, und das Wort wird als Schriftzeichen betrachtet. Daher sollte für chinesische Schriftzeichen und Englisch white-space:nowrap festgelegt werden, um Zeilenumbrüche zu verhindern. Da sich chinesische und englische Schriftzeichen unterscheiden, ist die von ihnen belegte Breite inkonsistent. Daher sollten 1 bis 2 Pixel reserviert werden.

Die entsprechenden Notizen und Beispiele habe ich auf GitHub abgelegt, https://github.com/sqh17/notes (lokaler Download). Wenn Sie üben möchten, können Sie es klonen.

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.