Heim > Web-Frontend > js-Tutorial > Hauptteil

So erzielen Sie mit reinem CSS den Effekt eines Mobiltelefonadressbuchs

不言
Freigeben: 2018-10-17 15:02:32
nach vorne
3157 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Effekt eines Mobiltelefonadressbuchs zu erzielen. Ich hoffe, dass er für Sie hilfreich ist.

Adressbuchlisten sehen wir oft auf Mobiltelefonen. Diese Art von Layout hat im Allgemeinen zwei wesentliche Auswirkungen

So erzielen Sie mit reinem CSS den Effekt eines Mobiltelefonadressbuchs

  1. Anfangsbuchstabenobergrenze

  2. Schnelle Positionierung

Lassen Sie es uns unten umsetzen

Seitenstruktur

Die Seitenstruktur hier ist sehr einfach, nur zwei Listen

<div>
    <!--联系人列表-->
    <div>
        <dl>A
        <dt>a1</dt>
        <dt>a2</dt>
        <dl>B
        <dt>b1</dt>
        <dt>b2</dt>
        ...
    </dl>
</dl>
</div>
    <!--导航列表-->
    <div>
        <a>A</a>
        <a>B</a>
    </div>
</div>
Nach dem Login kopieren
Nach dem Login kopieren

und dann einige Stile hinzufügen

html,body{
    margin: 0;
    height: 100%;
    padding: 0;
}
dl,dd{
    margin: 0;
}
.con{
    position: relative;
    height: 100%;
    overflow-x: hidden;
}
.index{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.index a{
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background: cornflowerblue;
    text-decoration: none;
    color: #fff;
    outline: 0;
    margin: 5px;
}
.contacts{
    height: 100%;
    background: #fff;
    overflow: auto;
    line-height: 2em;
}
.contacts dt{
    background: bisque;
    font-size: 1.5rem;
    color:cornflowerblue;
    height: 2em;
    line-height: 2em;
    padding: 0 10px;
}
.contacts dd{
    padding: 0 10px;
    display: block;
    cursor: pointer;
}
Nach dem Login kopieren

damit Sie das Layout sehen können

Den Deckeneffekt erzielen

Der Deckeneffekt ist eigentlich sehr einfach, verwenden Sie einfach das neue Attribut in CSSposition:sticky

klebrig positioniertes Element ) ist ein Element, dessen berechnete Positionsattribut ist klebrig.

Die Kompatibilität ist ziemlich gut, zumindest kann man es bedenkenlos auf dem mobilen Endgerät verwenden

So erzielen Sie mit reinem CSS den Effekt eines Mobiltelefonadressbuchs

Position hinzufügen: klebrig

.contacts dt{
    /*添加如下属性*/
    position: sticky;
    top: 0;
}
Nach dem Login kopieren
Dadurch wird der Deckeneffekt jeder Kategorie erreicht

Erzielt einen schnellen Positionierungseffekt

Wenn Sie kein js verwenden, können Sie Ankerpunktmethode. Die spezifische Methode zum Erreichen der Positionierung

href ist

<a></a>
...
...

<div></div>
Nach dem Login kopieren

Wenn die gesamte Seite scrollbar ist, springt die Seite schnell zur Seite, solange Sie auf

klicken

Element a id=AFügen Sie nun einige

und

herf

<div>
    <!--联系人列表-->
    <div>
        <dl>A
        <dt>a1</dt>
        <dt>a2</dt>
        <dl>B
        <dt>b1</dt>
        <dt>b2</dt>
        ...
    </dl>
</dl>
</div>
    <!--导航列表-->
    <div>
        <a>A</a>
        <a>B</a>
    </div>
</div>
Nach dem Login kopieren
Nach dem Login kopieren
id zu unserer Seite hinzu. Klicken Sie auf die Navigationsschaltfläche auf der rechten Seite und die Seite kann schnell positioniert werden

usw. Es scheint, dass es immer noch einige Probleme gibt. Beim Zurückspringen habe ich festgestellt, dass die Liste unten nicht vollständig erweitert wurde, obwohl das

-Tag angezeigt wurde 🎜> ist nicht herausgekommen

AAA

Was ist das Problem? So erzielen Sie mit reinem CSS den Effekt eines MobiltelefonadressbuchsNach vielen Studien habe ich herausgefunden, dass position:sticky verantwortlich ist!

Bei der Positionierung nach oben verwenden wir href, um es auf der ersten sichtbaren Position des Elements zu positionieren. Obwohl das Element zu diesem Zeitpunkt komprimiert ist, wird es nicht angezeigt hat ein solches Problem verursacht

Wenn Sie ein Problem finden, müssen Sie es lösen

Schnelle Reparatur des Positionierungseffekts

Eigentlich das, was wir wollen Die Position ist in Ordnung. Es ist das erste Listenelement unter , aber es kann nicht dieses Element sein, denn wenn es ein Element der ersten Generation ist, wird es beim Springen vom -Tag darüber abgedeckt.

Also fügen wir zwischen den beiden ein weiteres Tag zur Positionierung ein AAWie folgt hinzugefügt:

<div>
        <dl>A
        <dl>
        <dt>a1</dt>
        <dt>a2</dt>
        <dl>B
        <dl></dl>
        <dt>b1</dt>
        <dt>b2</dt>
        ...
    </dl>
</dl>
</dl>
</div>
Nach dem Login kopieren

Wenn Sie es direkt hier platzieren, nimmt es auf jeden Fall Platz ein, also verschieben wir es nach oben und stellen es dann auf unsichtbar, sodass das Element gerade die ursprüngliche Beschriftungsposition abdeckt

Wie folgt

.contacts .stikcy-fix{
    position: static;
    visibility: hidden;
    margin-top: -2em;
}
Nach dem Login kopieren

Sehen Sie mal, ist es ein perfekter Sprung?

Weitere Details

Wenn wir den Index rechts auswählen, erscheint normalerweise ein Großbuchstabe in der Mitte der Seite

Dies ist auch relativ einfach mit CSS zu implementieren. Verwenden Sie einfach den content:attr() des Pseudoelements, das ich auch im vorherigen Artikel erwähnt habe (Verwendung von reinem CSS, um das zu erreichen). Sterneffekt)So erzielen Sie mit reinem CSS den Effekt eines MobiltelefonadressbuchsDie spezifische Implementierung ist wie folgt

.index a:active:after{
    content: attr(data-type);
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    border-radius: 5px;
    text-align: center;
    line-height: 100px;
    font-size: 50px;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,.5);
}
Nach dem Login kopieren

wird hier verwendet, daher muss es ein

Attribut für

<!--导航列表-->
<div>
    <a>A</a>
    <a>B</a>
</div>
Nach dem Login kopieren
content: attr(data-type)Zweitens geben In tatsächlichen Projekten müssen wir aUm diese Listen zu generierendata-typeAngenommen, die von uns benötigten Daten sind wie folgt

var data = [
        {
            'type':'A',
            'user':[
                {
                    name:'a1'
                },
                {
                    name:'a2'
                },
                {
                    name:'a3'
                },
                {
                    name:'a1'
                },
                {
                    name:'a2'
                },
                {
                    name:'a3'
                },
                {
                    name:'a3'
                },
                {
                    name:'a1'
                },
                {
                    name:'a2'
                },
                {
                    name:'a3'
                },
            ]
        },
        {
            'type':'B',
            'user':[
                {
                    name:'b1'
                },
                {
                    name:'b2'
                },
                {
                    name:'b3'
                },
                {
                    name:'b1'
                },
                {
                    name:'b2'
                },
                {
                    name:'b3'
                },
                {
                    name:'b3'
                },
                {
                    name:'b1'
                },
                {
                    name:'b2'
                },
                {
                    name:'b3'
                },
            ]
        },
        {
            'type':'C',
            'user':[
                {
                    name:'c1'
                },
                {
                    name:'c2'
                },
                {
                    name:'c3'
                },
                {
                    name:'c1'
                },
                {
                    name:'c2'
                },
                {
                    name:'c3'
                },
                {
                    name:'c3'
                },
                {
                    name:'c1'
                },
                {
                    name:'c2'
                },
                {
                    name:'c3'
                },
            ]
        },
        {
            'type':'D',
            'user':[
                {
                    name:'d1'
                },
                {
                    name:'d2'
                },
                {
                    name:'d3'
                },
                {
                    name:'d1'
                },
                {
                    name:'d2'
                },
                {
                    name:'d3'
                },
                {
                    name:'d3'
                },
                {
                    name:'d1'
                },
                {
                    name:'d2'
                },
                {
                    name:'d3'
                },
            ]
        },
        {
            'type':'E',
            'user':[
                {
                    name:'e1'
                },
                {
                    name:'e2'
                },
                {
                    name:'e3'
                },
                {
                    name:'e1'
                },
                {
                    name:'e2'
                },
                {
                    name:'e3'
                },
                {
                    name:'e3'
                },
                {
                    name:'e1'
                },
                {
                    name:'e2'
                },
                {
                    name:'e3'
                },
            ]
        }
    ]
Nach dem Login kopieren
jsDaten in diesem Format können vom Backend zurückgegeben werden, oder direkt vom Frontend transformiert

Dann durchlaufen Sie einfach die Daten

var indexs = document.getElementById('index');
var contacts = document.getElementById('contacts');
var index_html = '';
var contacts_html = '';
data.forEach(el=>{
    contacts_html += '
Nach dem Login kopieren
'+el.type+'
';     index_html += ''+el.type+'';     el.user.forEach(d=>{         contacts_html+='
'+d.name+'
';     })     contacts_html+='
' }) indexs.innerHTML = index_html; contacts.innerHTML = contacts_html;

Dieser Teil von js generiert lediglich das Layout ohne funktionale Logik

Einige Mängel

Obwohl die Liste durch Ankerpunkte schnell positioniert werden kann, wird die Adressleiste des Browsers mit #A markiert. Zweitens sieht es nicht gut aus, wenn die Standardrückgabe des Browsers verwendet wird , alle diese Markierungen werden durchlaufen, was nicht sehr praktisch ist. Beim Scrollen der Liste kann die aktuelle Kategorie des Indexes auf der rechten Seite nicht hervorgehoben werden. Gleichzeitig unterstützt der Index auf der rechten Seite kein Verschieben zur schnellen Positionierung.

Diese detaillierten Probleme können nur durch js behoben werden.

Wenn es sich jedoch um ein einfaches kleines Projekt ohne so viele Anforderungen handelt, kann reines CSS immer noch sehr gut angewendet werden. Die Leistung ist definitiv um ein Vielfaches besser als das Scrollen der Überwachung durch js, und es ist leicht zu referenzieren, solange das Daten werden generiert. Kann direkt verwendet werden

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS den Effekt eines Mobiltelefonadressbuchs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage