モバイル弾性スライドとvue記録スライド位置の詳細説明

この記事では主にモバイル端末での弾性スライドと Vue 記録のスライド位置について詳しく説明します。皆様のお役に立てれば幸いです。

-webkit-overflow-scrolling Introduction

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

<code><span style="font-size: 14px;">auto</span>： 普通滚动，当手指从触摸屏上移开，滚动立即停止
<span style="font-size: 14px;">touch</span>：滚动回弹效果，当手指从触摸屏上移开，内容会保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

兼容写法

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

如何使用

上代码：

<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>

可能会出现的bug

1. 父级元素<span style="font-size: 14px;">scrollContainer</span>加上定位<span style="font-size: 14px;">position: absolute|relative</span>，滑动几次后可滚动区域会卡主，不能在滑动

2. 快速滑动页面会出现空白，滑动停止后内容才显示

此时，你应该给父级元素<span style="font-size: 14px;">scrollContainer</span>加上如下代码：

<span style="font-size: 14px;">//解决第一个bug<br>z-index:1;    <br><br>//解决第二个bug<br>-webkit-backface-visibility: hidden;    <br>-webkit-transform: translate3d(0,0,0);<br></span>

需求

在vue项目中，我们可能会遇到这样的需求，例如：

商品列表页中，点击某一商品，进入到详情页。

从详情页中返回到商品列表页，页面应当显示的页面应当是之前的样子。

也就是说，滚动条的位置应该缓存下来；

思路

1. 商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面，这样，在详情页面返回的时候，页面不至于重新加载。

2. 在商品列表生命周期<span style="font-size: 14px;">activated</span>中，监听当前<span style="font-size: 14px;">scrollContainer</span>父元素的滚动事件，滚动时的回调中，获取到<span style="font-size: 14px;">scrollTop</span>(滚动条距离滚动元素即<span style="font-size: 14px;">scrollContainer</span>的距离)的值，存入到以及在<span style="font-size: 14px;">deactivated</span>中移除掉当前滚动事件的监听。

3. 在商品列表中，点击进入详情页中的时候，将滚动条位置被缓存下来了，你可以放到<span style="font-size: 14px;">sessionStorage|localStorage</span>中。当然，如果你使用了vuex，可以直接将值放入vuex中进行管理；

4. 从详情页中返回的时候，同时要做这样的操作，将你存入缓存中的<span style="font-size: 14px;">scrollTop</span>auto: 通常のスクロール。タッチスクリーンから指を離すと、スクロールはすぐに停止します

<li>タッチ<p> </p> </li>: スクロールリバウンド効果。タッチスクリーンから指を離すと、コンテンツは一定時間スクロール効果を維持します。継続的なスクロールの速度と持続時間は、スクロールの強さに比例します。スクロールジェスチャー。新しいスタック コンテキストも作成されます。

互換性のある書き込み

<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>

rrreee

考えられるバグ

Paレンタル要素

<p>scrollContainer<a href="http://www.php.cn/js-tutorial-384628.html" target="_self"></a></p>位置を追加🎜position:Absolute|relative🎜🎜。何度かスライドすると、スクロール可能な領域が固まってスライドできなくなります🎜🎜🎜🎜 🎜🎜素早くスライドするとページが空白になり、スライドが止まって初めてコンテンツが表示されます🎜🎜🎜🎜🎜🎜このとき、親要素🎜🎜scrollContainer🎜に次のコードを追加する必要があります>🎜: 🎜🎜rrreee 🎜🎜要件🎜🎜🎜🎜 vue プロジェクトでは、次のようなニーズに遭遇することがあります。 🎜🎜🎜🎜 製品リスト ページで、製品をクリックして詳細ページに入ります。 🎜🎜🎜🎜詳細ページから商品一覧ページに戻ると、表示されるページは以前と同じはずです。 🎜🎜🎜🎜つまり、スクロールバーの位置をキャッシュする必要があります。🎜🎜
🎜🎜🎜商品リストをキャッシュする必要があります。ページをキャッシュする方法を教えてください。詳細ページが返されたときにページがリロードされないように、vue 公式ドキュメントの keep-alive にチェックを入れてページをキャッシュします。 🎜🎜🎜🎜🎜🎜商品リストのライフサイクル 🎜🎜activated🎜🎜 で、現在の 🎜🎜scrollContainer🎜🎜 親要素のスクロール イベントをリッスンします。スクロール時のコールバックで、 🎜🎜scrollTop🎜🎜 の値 (スクロール バーとスクロール要素の間の距離、つまり 🎜🎜scrollContainer🎜🎜) を取得します。それを と に保存します🎜🎜 現在のスクロール イベント監視を非アクティブ化🎜🎜から削除します。 🎜🎜🎜🎜🎜🎜商品リストで、クリックして詳細ページに入ると、スクロールバーの位置が🎜🎜sessionStorage|localStorage🎜🎜にキャッシュされます。もちろん、vuex を使用する場合は、管理のために値を vuex に直接入力できます 🎜🎜🎜🎜🎜🎜詳細ページから戻ったときに、これを同時に実行し、🎜🎜scrollTop🎜 🎜 値は、現在の p🎜🎜🎜🎜🎜🎜 のスクロール バーに再割り当てされます。OK、アイデアは次のようになります。これで完了です。 🎜🎜🎜🎜🎜🎜vue での具体的な実装🎜🎜🎜🎜 スクロール バーの位置を管理するために vuex を使用します。実装コードは次のとおりです。 🎜🎜rrreeerrreee🎜 関連する推奨事項: 🎜🎜🎜jQuery のエラスティック スライド ナビゲーション メニューの実装アイデアとcode_ jquery🎜🎜🎜🎜Web引き戸効果サンプル共有のHTML+CSS実装🎜🎜🎜🎜jQueryを一番下にスライドすると、次のページのデータサンプル説明が読み込まれます🎜🎜

以上がモバイル弾性スライドとvue記録スライド位置の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。