摘要:在商品列表生命周期中,監聽當前父元素的滾動事件,滾動時的回調中,獲取到滾動條距離滾動元素即的距離的值,存入到以及在中移除掉當前滾動事件的監聽。
-webkit-overflow-scrolling介紹
-webkit-overflow-scrolling: auto | touch;
auto: 普通滾動,當手指從觸摸屏上移開,滾動立即停止
touch:滾動回彈效果,當手指從觸摸屏上移開,內容會保持一段時間的滾動效果,繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。
over-flow: auto; /* winphone8和android4+ */ -webkit-overflow-scrolling: touch; /* ios5+ */如何使用
上代碼:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
.scrollContainer{ width: 100px; height: 50px; -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .scrollContainer>ul>li{ height: 20px; width: 100%; }可能會出現的bug
父級元素scrollContainer加上定位position: absolute|relative,滑動幾次后可滾動區域會卡主,不能在滑動
快速滑動頁面會出現空白,滑動停止后內容才顯示
此時,你應該給父級元素scrollContainer加上如下代碼:
//解決第一個bug z-index:1; //解決第二個bug -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0);需求
在vue項目中,我們可能會遇到這樣的需求,例如:
商品列表頁中,點擊某一商品,進入到詳情頁。
從詳情頁中返回到商品列表頁,頁面應當顯示的頁面應當是之前的樣子。
也就是說,滾動條的位置應該緩存下來;
思路商品列表需要被緩存下來,頁面的緩存方式請查看vue官方文檔keep-alive來緩存頁面,這樣,在詳情頁面返回的時候,頁面不至于重新加載。
在商品列表生命周期activated中,監聽當前scrollContainer父元素的滾動事件,滾動時的回調中,獲取到scrollTop(滾動條距離滾動元素即scrollContainer的距離)的值,存入到以及在deactivated中移除掉當前滾動事件的監聽。
在商品列表中,點擊進入詳情頁中的時候,將滾動條位置被緩存下來了,你可以放到sessionStorage|localStorage中。當然,如果你使用了vuex,可以直接將值放入vuex中進行管理;
從詳情頁中返回的時候,同時要做這樣的操作,將你存入緩存中的scrollTop值重新賦予給當前div的滾動條
Ok,思路就是這樣子,大功告成。
vue中具體實現我是用的vuex進行管理的滾動條位置,實現代碼如下:
//加了一個ref,用于獲取當前dom
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
computed:{ ...mapGetters([ "home_list_top" //vuex中的存放的滾動條的位置 ]) } ... methods:{ recordScrollPosition(e) { this.$store.dispatch("setHomeListTop",e.target.scrollTop); //實時存入到vuex中 } } ... activated(){ //滾動條位置的監聽放到activated是因為此頁面被keep-alive緩存了 this.$refs.scroll.scrollTop = this.home_list_top; //this.$refs.scroll拿到滾動的dom,即scrollContainer,this.home_list_top是存入到vuex里的值 this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition); //添加綁定事件 }, deactivated(){ //keep-alive 的頁面跳轉時,移除scroll事件 this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition); //清除綁定的scroll事件 }后話
如果有更好的辦法,互相交流。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92507.html
摘要:在商品列表生命周期中,監聽當前父元素的滾動事件,滾動時的回調中,獲取到滾動條距離滾動元素即的距離的值,存入到以及在中移除掉當前滾動事件的監聽。 -webkit-overflow-scrolling介紹 -webkit-overflow-scrolling: auto | touch; auto: 普通滾動,當手指從觸摸屏上移開,滾動立即停止touch:滾動回彈效果,當手指從觸摸屏上...
摘要:問題移動設備上的觸摸事件如何利用它們三個來處理點擊長按滑動等操作,以及如何在測試用例中模擬它們的操作參考了實現方法上這位大哥的思路移動設備的點擊優化參考了感謝解決使用自定義指令來干這件事來記錄開始點擊的位置和時間,并在這里邊判斷長按操作來確 問題: 移動設備上的觸摸事件:touchstart、touchmove、touchend如何利用它們三個來處理點擊、長按、滑動等操作,以及如何在測...
摘要:里邊涉及到的指令是自定義的指令,為了處理移動端的點擊操作,我還整理了一片陋文移動點擊長按滑動指令然后這個組件的源碼我放在了我出來的項目上謝謝各位品嘗, 以下這段都是廢話,請跳過 公司移動端開發平臺進行了大變革,前端架構由DCloud大生態轉換為VUE,所以移動端的UI組件庫從MUI改為使用MintUI,然后開始大刀闊斧的把MintUI組件改成MUI組件的樣子,然后發現少了幾個較為常用的...
摘要:免費升級到升級到后,服務器可以開啟版本,對比性能和緩存各方面要更好,還有其他新特性,可以啟動功能,更好的進行離線緩存,更好的離線體驗。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在線地址:https://fancy.czero.cn 手機掃描二維碼查看: showImg(http...
一、 基礎實現 (1)功能 對 better-scroll 插件的基本封裝,實現移動端的滾動 (2)實現 引入 better-scroll props probeType: better-scroll 配置項之一 (1)取值: 1 滾動的時候會派發 scroll 事件,會截流。 2 滾動的時候實時派發 scroll 事件,不會截流。 3 除了實時派發 scroll 事件,在 swipe 的情況...
閱讀 1808·2021-11-23 09:51
閱讀 1268·2021-11-18 10:02
閱讀 963·2021-10-25 09:44
閱讀 2099·2019-08-26 18:36
閱讀 1619·2019-08-26 12:17
閱讀 1146·2019-08-26 11:59
閱讀 2746·2019-08-23 15:56
閱讀 3350·2019-08-23 15:05