모바일 탄성 슬라이딩에 대한 자세한 설명 및 슬라이딩 위치를 기록하는 뷰

이 글은 주로 모바일 단말기의 탄성 슬라이딩과 Vue에서 기록한 슬라이딩 위치에 대한 자세한 설명을 공유합니다. 모두에게 도움이 되기를 바랍니다.

-webkit-overflow-scrolling 소개

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

가능한 버그

부모 요소

scrollContainer위치 추가

🎜위치: 절대|상대🎜🎜. 몇 번 슬라이드하면 스크롤 가능한 영역이 멈춰서 슬라이드할 수 없게 됩니다🎜🎜🎜🎜 🎜🎜 빠르게 슬라이딩하면 페이지가 공백으로 나타나고 슬라이딩이 중지된 후에만 내용이 표시됩니다🎜🎜🎜🎜🎜🎜이때 상위 요소 🎜🎜scrollContainer🎜에 다음 코드를 추가해야 합니다. >🎜: 🎜🎜rrreee 🎜🎜Requirements🎜🎜🎜🎜vue 프로젝트에서 다음과 같은 요구 사항이 발생할 수 있습니다. 예: 🎜🎜🎜🎜제품 목록 페이지에서 제품을 클릭하여 세부 정보 페이지로 들어갑니다. 🎜🎜🎜🎜상세 페이지에서 상품 목록 페이지로 돌아가면 표시되는 페이지는 이전과 동일해야 합니다. 🎜🎜🎜🎜즉, 스크롤바의 위치를 ​​캐시해야 합니다. 🎜🎜🎜🎜Idea 🎜🎜
🎜🎜🎜상품 목록을 캐시해야 합니다. 페이지를 캐시하는 방법을 알려주세요. vue 공식 문서 keep-alive를 확인하여 세부정보 페이지가 반환될 때 페이지가 다시 로드되지 않도록 하세요. 🎜🎜🎜🎜🎜🎜제품 목록 수명 주기 🎜🎜activated🎜🎜에서 현재 🎜🎜scrollContainer🎜🎜 상위 요소의 스크롤 이벤트를 수신합니다. 스크롤할 때 콜백하고 🎜🎜scrollTop🎜🎜(스크롤 막대와 스크롤 요소 사이의 거리, 즉 🎜🎜scrollContainer🎜🎜) 값을 가져옵니다. 🎜🎜 deactivated🎜🎜에서 현재 스크롤 이벤트 모니터링을 제거합니다. 🎜🎜🎜🎜🎜🎜상품목록에서 클릭해서 상세페이지로 들어가시면 스크롤바 위치가 🎜🎜sessionStorage|localStorage🎜🎜에 넣어두시면 됩니다. 물론 vuex를 사용하는 경우 관리를 위해 vuex에 직접 값을 넣을 수 있습니다. 🎜🎜🎜🎜🎜🎜세부정보 페이지에서 돌아올 때 이 작업을 동시에 수행하고 🎜🎜scrollTop🎜 🎜 값은 현재 p🎜🎜🎜🎜🎜🎜이제 아이디어는 이렇습니다. 끝났습니다. 🎜🎜🎜🎜🎜🎜vue의 구체적인 구현🎜🎜🎜🎜스크롤 막대 위치를 관리하기 위해 vuex를 사용합니다. 구현 코드는 다음과 같습니다. 🎜🎜rrreeerrreee🎜관련 권장 사항: 🎜🎜🎜jQuery 탄력적인 슬라이딩 탐색 메뉴 구현 아이디어 및 code_ jquery🎜🎜🎜🎜HTML+CSS 웹 미닫이문 효과 구현 예시 공유🎜🎜🎜🎜j다음 페이지 데이터 예시 설명을 로드하려면 하단으로 슬라이드 쿼리🎜🎜

위 내용은 모바일 탄성 슬라이딩에 대한 자세한 설명 및 슬라이딩 위치를 기록하는 뷰의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!