Implementierung des SCSS-Effekts der mobilen Seitenmaskenebene und Lösungen für häufige Probleme

Beispiel

ist kompatibel mit Android 4.0.4+:

Die Designstruktur ist wie folgt:

<header class="header"></header>
<p class="wrap-page">
    <section class="page"></section>
    ...   
</p>
<footer class="footer"></footer>
<p class="overlay">
    <section class="modal">
        <p class="modal-hd"></p>
        <p class="modal-bd"></p>
        <p class="modal-ft"></p>
    </section>
</p>

Dieses Problem mit der Overlay-Maskenebene. Hier finden Sie eine Erklärung, warum es so gestaltet ist.

Im Allgemeinen ist die angezeigte Überlagerung ein gleichgeordnetes Element des Modals und keine verschachtelte Beziehung. Ursprünglich habe ich es so entworfen, es ist nur eine Gewohnheit. Aufgrund des Problems der modalen Zentrierung habe ich später diese Frage noch einmal aufgegriffen:

Warum sind die Überlagerungs- und Popup-Inhalte der Maskenebene Geschwisterelemente?

Um ehrlich zu sein, kann ich mir keinen Grund vorstellen, warum es eine Bruderschaft sein muss. Später wurde mir plötzlich klar, dass, wenn die vorherige Maskenebene kein halbtransparentes Bild verwenden würde, sie Opazität verwenden müsste (dh 6-8 unterstützt dies nicht, es wird durch einen Filter simuliert), und dieses Attribut wirkt sich auf das Ganze aus Untergeordnetes Element, und es gibt keine Möglichkeit, diesen Wert über untergeordnete Elemente zu überschreiben. Das ist der beste Grund, der mir einfällt. Wenn es noch andere Gründe gibt, teilen Sie uns diese gerne mit.

Für High-End-Mobilterminals ist die Ära von RGBA angebrochen, daher geht die Opazität an erster Stelle. Da die Auswirkungen auf untergeordnete Elemente kein Problem mehr darstellen, kann die Verschachtelungsbeziehung hergestellt werden, und es gibt einen sehr guten Grund für die horizontale und vertikale Zentrierung. Bewegen Sie einfach Ihren kleinen Finger. Um die Geschwisterelemente horizontal und vertikal zu zentrieren, müssen Sie die oberen und linken Werte des Modals auf 50 % und dann die x- und y-Richtungen der Übersetzung auf -50 % einstellen

Also entschieden Geben Sie das Geschwisterelementdesign auf und ersetzen Sie es durch eine Verschachtelungsbeziehung.

Da das Overlay das Flex-Layout verwendet, um die Zentrierung untergeordneter Elemente zu steuern, ist es nicht schwierig, die Anzeige als „Keine/Block“ zum Anzeigen und Ausblenden des Maskenebenen-Overlays zu verwenden, sondern es über die Z-Index-Ebene zu steuern. und modal Steuern Sie die Anzeige und das Ausblenden teilweise durch Hinzufügen und Löschen der modalen Klasse

SCSS-Code lautet wie folgt:

.overlay{   
    position: fixed;   
    top: 0;   
    rightright: 0;   
    bottombottom: 0;   
    left: 0;   
    z-index: -1;   
    background-color: rgba(0,0,0,.8);   
    @include flex-center; // flex水平垂直居中   
}   
.overlay.active {   
  z-index: 980;   
}   

$modalBarHeight: 40px !default;   
$modalBdPadding: 15px;   

.modal{   
    background-color: #fff;   
    border-radius: 5px;   
    margin: 0 10px;   
    overflow: hidden;   
    opacity: 0;   
    @include transform(translate3d(0,0,0) scale(0.815));   
    @extend %all-transition;   
    @include transition-property(transform, opacity);   

    &.modal-in{   
        opacity: 1;   
        @include transform(translate3d(0,0,0) scale(1));   
    }   

    .modal-hd{   
        text-align: center;   
        line-height: $modalBarHeight;   
        background-color: $primary;   
        color: #fff;   
    }   
    .modal-bd{   
        padding: $modalBdPadding;   
    }   
    .modal-ft{   
        border-top: 1px solid $gray;   
        @extend %display-flex;   
        .btn-modal{   
            @include flex(1);   
            background-color: #fefefe;   
            text-align: center;   
            line-height: $modalBarHeight;   
            color: $primary;   
            &:first-child{   
                border-right: 1px solid $gray;   
            }   
            &:last-child{   
                border-right: none;   
            }   
            &:hover,&:active{   
                background-color: #d9d9d9;   
            }   
        }   
    }   
}

Lösung für häufige Probleme
Bei der Simulation von Popup-Fenstern auf dem mobilen Endgerät bin ich auf einige Probleme gestoßen, die zur Vertiefung meines Gedächtnisses wie folgt zusammengefasst werden.

Situation 1:
Wenn die Höhe des Körpers größer als die Höhe des Ansichtsfensters ist und beim Schieben im Popup-Fenster auch der Körper mitgleitet .

Lösung:
Touchmove deaktivieren und overflow:hidden implementieren, siehe folgenden Code:

/**
 * 初始化弹窗
 */
var initDialog = (function() {   
    var _tmpl = baidu.template('dialog-tpl', {});   

    return {   
        tmpl : $(_tmpl),   

        /**
         * [create 创建弹窗]
         * @return {[type]} [description]
         */
        create: function() {   
            var me = this,   
                _tmpl = me.tmpl;   

            $('body')   

            // 禁用鼠标滚轮滚动
            .css('overflow', 'hidden')   

            .append(_tmpl)   

            // 禁止touchmove，阻止body滑动
            .on('touchmove', function(e) {   
                e.preventDefault();   
            })   

            // 关闭动作
            .on('tap', 'dialog-close', function() {   
                me.destroy();   
            })   
        },   

        /**
         * [destroy 销毁弹窗]
         * @return {[type]} [description]
         */
        destroy: function() {   
            this.tmpl.remove();   

            // 解除touchmove绑定、启用滚动
            $('body').off().css('overflow', 'auto');   
        }   
    }   
})();

Fall 2:
Wenn die Softtastatur angezeigt wird, kann das benutzerdefinierte Popup-Fenster nicht den gesamten Bildschirm ausfüllen

Lösung:
Bevor Sie das Popup-Fenster öffnen, verwenden Sie das Unschärfeereignis von Javascript, um Schließen Sie die Softtastatur.

$(“:focus”).blur();

Fall 3:
Bei der Implementierung der Toast-Komponente, wenn Toast verwendet wird
Position: fest;unten:-3rem; Das heißt, wenn es nahe am unteren Rand ist, sollte die Tastatur die Seite nach oben schieben. In IOS- und Andriod UC-Browsern wird der Toast jedoch von der Tastatur verdeckt. Index hilft es nicht, da die Tastatur während des gesamten Surfens auf der oberen Ebene des Geräts verwendet wird.

Lösung:
Wenn ein Toast erscheint, hören Sie sich die Ereignisse aller Steuerelemente an, und wenn der Fokus erfolgt, berechnen Sie dynamisch die aktuelle Position und berechnen Sie sie neu. Es gibt jedoch ein Problem. Die Höhe der Tastatur ist bei verschiedenen Modellen nicht einheitlich. M-seitiger Referenzcode:

<style type="text/css">   
    body {   
        text-align: center;   
    }   
    input[type=text] {   
        width: 80%;    
        height: .8rem;   
        margin-top: .3rem;   
    }   
    .toast {   
        position: fixed;    
        bottombottom: .3rem;    
        left: 50%;    
        margin-left: -1rem;    
        width: 2rem;    
        height: 1rem;    
        background-color: #f00;    
        border-radius: 10px;   
        color: #fff;   
    }   
</style>   
<input type="text">   
<p class="toast">Toast</p>

Das obige ist der detaillierte Inhalt vonImplementierung des SCSS-Effekts der mobilen Seitenmaskenebene und Lösungen für häufige Probleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!