移動(dòng)端彈性滑動(dòng)以及vue記錄滑動(dòng)位置

wuyangnju 發(fā)布于2019-08-22 13:50 / 1648人閱讀

摘要：在商品列表生命周期中，監(jiān)聽(tīng)當(dāng)前父元素的滾動(dòng)事件，滾動(dòng)時(shí)的回調(diào)中，獲取到滾動(dòng)條距離滾動(dòng)元素即的距離的值，存入到以及在中移除掉當(dāng)前滾動(dòng)事件的監(jiān)聽(tīng)。

-webkit-overflow-scrolling介紹

-webkit-overflow-scrolling: auto  |  touch;

auto：普通滾動(dòng)，當(dāng)手指從觸摸屏上移開(kāi)，滾動(dòng)立即停止
touch：滾動(dòng)回彈效果，當(dāng)手指從觸摸屏上移開(kāi)，內(nèi)容會(huì)保持一段時(shí)間的滾動(dòng)效果，繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢(shì)的強(qiáng)烈程度成正比。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆棧上下文。

兼容寫(xiě)法

over-flow: auto;     /* winphone8和android4+ */
-webkit-overflow-scrolling: touch;    /* ios5+ */

如何使用

上代碼：

.scrollContainer{
    width: 100px;
    height: 50px;   
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;       
    overflow-x: hidden;    
}
.scrollContainer>ul>li{
    height: 20px;
    width: 100%;
}

可能會(huì)出現(xiàn)的bug

父級(jí)元素scrollContainer加上定位position: absolute|relative，滑動(dòng)幾次后可滾動(dòng)區(qū)域會(huì)卡主，不能在滑動(dòng)

快速滑動(dòng)頁(yè)面會(huì)出現(xiàn)空白，滑動(dòng)停止后內(nèi)容才顯示

此時(shí)，你應(yīng)該給父級(jí)元素scrollContainer加上如下代碼：

//解決第一個(gè)bug
z-index:1;    

//解決第二個(gè)bug
-webkit-backface-visibility: hidden;    
-webkit-transform: translate3d(0,0,0);

需求

在vue項(xiàng)目中，我們可能會(huì)遇到這樣的需求，例如：

商品列表頁(yè)中，點(diǎn)擊某一商品，進(jìn)入到詳情頁(yè)。

從詳情頁(yè)中返回到商品列表頁(yè)，頁(yè)面應(yīng)當(dāng)顯示的頁(yè)面應(yīng)當(dāng)是之前的樣子。

也就是說(shuō)，滾動(dòng)條的位置應(yīng)該緩存下來(lái)；

思路

商品列表需要被緩存下來(lái),頁(yè)面的緩存方式請(qǐng)查看vue官方文檔keep-alive來(lái)緩存頁(yè)面，這樣，在詳情頁(yè)面返回的時(shí)候，頁(yè)面不至于重新加載。

在商品列表生命周期activated中，監(jiān)聽(tīng)當(dāng)前scrollContainer父元素的滾動(dòng)事件，滾動(dòng)時(shí)的回調(diào)中，獲取到scrollTop(滾動(dòng)條距離滾動(dòng)元素即scrollContainer的距離)的值，存入到以及在deactivated中移除掉當(dāng)前滾動(dòng)事件的監(jiān)聽(tīng)。

在商品列表中，點(diǎn)擊進(jìn)入詳情頁(yè)中的時(shí)候，將滾動(dòng)條位置被緩存下來(lái)了，你可以放到sessionStorage|localStorage中。當(dāng)然，如果你使用了vuex，可以直接將值放入vuex中進(jìn)行管理；

從詳情頁(yè)中返回的時(shí)候，同時(shí)要做這樣的操作，將你存入緩存中的scrollTop值重新賦予給當(dāng)前div的滾動(dòng)條

Ok，思路就是這樣子，大功告成。

vue中具體實(shí)現(xiàn)

我是用的vuex進(jìn)行管理的滾動(dòng)條位置，實(shí)現(xiàn)代碼如下：

    //加了一個(gè)ref，用于獲取當(dāng)前dom 
     
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10

computed:{
    ...mapGetters([
          "home_list_top"    //vuex中的存放的滾動(dòng)條的位置
    ])
}
...
methods:{
    recordScrollPosition(e) {
      this.$store.dispatch("setHomeListTop",e.target.scrollTop);    //實(shí)時(shí)存入到vuex中
    }
}
...
activated(){  //滾動(dòng)條位置的監(jiān)聽(tīng)放到activated是因?yàn)榇隧?yè)面被keep-alive緩存了
    this.$refs.scroll.scrollTop = this.home_list_top;        //this.$refs.scroll拿到滾動(dòng)的dom，即scrollContainer，this.home_list_top是存入到vuex里的值
    this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition);    //添加綁定事件
},
deactivated(){  //keep-alive 的頁(yè)面跳轉(zhuǎn)時(shí)，移除scroll事件
    this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition);  //清除綁定的scroll事件
}

后話

如果有更好的辦法，互相交流。

云服務(wù)器 GPU云服務(wù)器 js?移動(dòng)端滑動(dòng) 位置滑動(dòng)控件顯示 android彈性滑動(dòng) js上下滑動(dòng)彈性

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92507.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wuyangnju

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

linux之realpath命令

閱讀 1845·2021-11-23 09:51
如何在SpringBoot啟動(dòng)時(shí)執(zhí)行初始化操作，兩個(gè)簡(jiǎn)單接口就可以實(shí)現(xiàn)

閱讀 1303·2021-11-18 10:02
酷銳云：雙十一活動(dòng)預(yù)熱，1核/2G/10M帶寬，月付11元，4核/8G/20M帶寬，月付111元

閱讀 974·2021-10-25 09:44
IIFE立即執(zhí)行函數(shù)

閱讀 2114·2019-08-26 18:36
VUE 全局變量的幾種實(shí)現(xiàn)方式

閱讀 1634·2019-08-26 12:17
JavaScript 進(jìn)階從實(shí)現(xiàn)理解閉包（校對(duì)版）

閱讀 1158·2019-08-26 11:59
Vue基礎(chǔ)之計(jì)算屬性

閱讀 2755·2019-08-23 15:56
使用webpack打包多頁(yè)jquery項(xiàng)目

閱讀 3367·2019-08-23 15:05

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

移動(dòng)端彈性滑動(dòng)以及vue記錄滑動(dòng)位置

相關(guān)文章