Ausführliche Erläuterung der beweglichen elastischen Gleit- und Vue-Aufzeichnungs-Gleitposition

Dieser Artikel gibt Ihnen hauptsächlich die detaillierte Erklärung des elastischen Gleitens auf dem mobilen Endgerät und der Vue-Aufzeichnungs-Gleitposition. Ich hoffe, dass er allen helfen kann.

-webkit-overflow-scrolling-Einführung

<span style="font-size: 14px;">-webkit-overflow-scrolling: auto  |  touch;<br></span>

<code><span style="font-size: 14px;">auto</span>auto
: Normales Scrollen, wenn der Finger vom Touchscreen entfernt wird, stoppt das Scrollen sofort <span style="font-size: 14px;">touch</span><span style="font-size: 14px;">Touch</span>

: Scroll-Rebound-Effekt, wenn der Finger wird vom Touchscreen entfernt. Bewegen Sie sich weg, und der Inhalt behält den Scroll-Effekt für einen bestimmten Zeitraum bei. Die Geschwindigkeit und Dauer des fortgesetzten Scrollens sind proportional zur Intensität der Scroll-Geste. Außerdem wird ein neuer Stapelkontext erstellt.

Kompatibles Schreiben

<span style="font-size: 14px;">over-flow: auto;     /* winphone8和android4+ */<br>-webkit-overflow-scrolling: touch;    /* ios5+ */<br></span>

Verwendung von

Code:

<span style="font-size: 14px;"><p class="scrollContainer"><br>     <ul><br>       <li>1</li><br>       <li>2</li><br>       <li>3</li><br>       <li>4</li><br>       <li>5</li><br>       <li>6</li><br>       <li>7</li><br>       <li>8</li><br>       <li>9</li><br>       <li>10</li>  <br>     </ul><br></p><br></span>

<span style="font-size: 14px;">.scrollContainer{<br>    width: 100px;<br>    height: 50px;   <br>    -webkit-overflow-scrolling: touch;<br>    overflow-y: auto;       <br>    overflow-x: hidden;    <br>}<br>.scrollContainer>ul>li{<br>    height: 20px;<br>    width: 100%;<br>}<br></span>

Mögliche Fehler

1. <span style="font-size: 14px;">scrollContainer</span>Übergeordnetes ElementscrollContainer <span style="font-size: 14px;">position: absolute|relative</span>Positionierung hinzufügen

   Position: absolut|relativ
2. Nach mehrmaligem Schieben bleibt der scrollbare Bereich hängen und kann nicht verwendet werden. Beim Schieben

erscheint die Seite leer und der Inhalt wird erst angezeigt, wenn das Schieben stoppt

<span style="font-size: 14px;">scrollContainer</span>An dieser Stelle sollten Sie den folgenden Code zum übergeordneten Element

<pre class="brush:php;toolbar:false">&lt;span style=&quot;font-size: 14px;&quot;&gt;//解决第一个bug&lt;br&gt;z-index:1;    &lt;br&gt;&lt;br&gt;//解决第二个bug&lt;br&gt;-webkit-backface-visibility: hidden;    &lt;br&gt;-webkit-transform: translate3d(0,0,0);&lt;br&gt;&lt;/span&gt;</pre>scrollContainer<h2></h2> hinzufügen:

Anforderungen

Im Vue-Projekt können wir auf solche Anforderungen stoßen, zum Beispiel:

Auf der Produktlistenseite Klicken Sie auf ein Produkt und rufen Sie die Detailseite auf.

Kehren Sie von der Detailseite zur Produktlistenseite zurück. Die Seite, die angezeigt werden soll, sollte dieselbe sein wie zuvor.

Mit anderen Worten, die Position der Bildlaufleiste sollte zwischengespeichert werden

1. Idee

2. Die Produktliste muss zwischengespeichert werden, um die Seite zwischenzuspeichern, damit die Seite nicht neu geladen wird . <span style="font-size: 14px;">activated</span><span style="font-size: 14px;">scrollContainer</span>Überwachen Sie im Produktlisten-Lebenszyklus aktiviert<span style="font-size: 14px;">scrollTop</span> den aktuellen <span style="font-size: 14px;">scrollContainer</span>scrollContainerDas Scroll-Ereignis des übergeordneten Elements erhält im Rückruf während des Scrollens <span style="font-size: 14px;">deactivated</span><span style="font-size: 14px;">scrollTop</span>

   (Der Abstand zwischen der Bildlaufleiste und dem Bildlaufelement, also
<li>scrollContainer<p></p> </li>) Der Wert wird in und in <code><span style="font-size: 14px;">sessionStorage|localStorage</span>deaktiviertEntfernen Sie die Überwachung des aktuellen Scroll-Ereignisses.

3. Wenn Sie in der Produktliste auf die Detailseite klicken, wird die Position der Bildlaufleiste zwischengespeichert. Sie können sie in <span style="font-size: 14px;">scrollTop</span> einfügen <span style="font-size: 14px;">sessionStorage|localStorage</span>

   . Wenn Sie Vuex verwenden, können Sie den Wert natürlich direkt zur Verwaltung in Vuex eingeben.

4. Wenn Sie von der Detailseite zurückkehren, tun Sie dies gleichzeitig Vorgang: Weisen Sie den Wert

scrollTop

, den Sie im Cache gespeichert haben, der Bildlaufleiste des aktuellen p

neu zu

Ok, das ist die Idee, fertig. Ich verwende vuex, um die Position der Bildlaufleiste zu verwalten. Der Implementierungscode lautet wie folgt:

<span style="font-size: 14px;"><p class="scrollContainer" ref="scroll">    //加了一个ref，用于获取当前dom <br>     <ul><br>       <li>1</li><br>       <li>2</li><br>       <li>3</li><br>       <li>4</li><br>       <li>5</li><br>       <li>6</li><br>       <li>7</li><br>       <li>8</li><br>       <li>9</li><br>       <li>10</li>  <br>     </ul><br></p><br></span>

<span style="font-size: 14px;">computed:{<br>    ...mapGetters([<br>          "home_list_top"    //vuex中的存放的滚动条的位置<br>    ])<br>}<br>...<br>methods:{<br>    recordScrollPosition(e) {<br>      this.$store.dispatch("setHomeListTop",e.target.scrollTop);    //实时存入到vuex中<br>    }<br>}<br>...<br>activated(){  //滚动条位置的监听放到activated是因为此页面被keep-alive缓存了<br>    this.$refs.scroll.scrollTop = this.home_list_top;        //this.$refs.scroll拿到滚动的dom，即scrollContainer，this.home_list_top是存入到vuex里的值<br>    this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition);    //添加绑定事件<br>},<br>deactivated(){  //keep-alive 的页面跳转时，移除scroll事件<br>    this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition);  //清除绑定的scroll事件<br>}<br></span>

Verwandte Empfehlungen:

Implementierung des elastischen gleitenden Navigationsmenüs von jQuery Ideen und Code_jquery

HTML+CSS-Implementierung des Web-Schiebetüreffekts, Beispielfreigabe

jQuery nach unten schieben, um die nächste Seite mit Daten zu laden Beispielerklärung

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der beweglichen elastischen Gleit- und Vue-Aufzeichnungs-Gleitposition. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!