vue監(jiān)聽(tīng)scroll的坑

Taste 發(fā)布于2019-08-21 16:19 / 3348人閱讀

摘要：最近開(kāi)始用寫(xiě)個(gè)小項(xiàng)目，踩了不少坑，這里記錄下爬坑過(guò)程，給有同樣經(jīng)歷的人幫助。解決辦法我回去看了下文檔的生命周期，看到了，然后直接在這個(gè)周期內(nèi)銷(xiāo)毀就可以了。

最近開(kāi)始用vue寫(xiě)個(gè)小項(xiàng)目，踩了不少坑，這里記錄下爬坑過(guò)程，給有同樣經(jīng)歷的人幫助。

問(wèn)題

今天想在vue的項(xiàng)目里面用下拉加載，然后就直接寫(xiě)了:

但是我發(fā)現(xiàn)我切換路由以后依舊其他頁(yè)面也觸發(fā)了scrollHandler函數(shù)，然后我想到使用了vue-router做的spa項(xiàng)目，window對(duì)象不變的，所以需要在每次使用后銷(xiāo)毀。

解決辦法

我回去看了下vue文檔的生命周期，看到了destroyed，然后直接在這個(gè)周期內(nèi)銷(xiāo)毀就可以了。

使用throttle出現(xiàn)的新問(wèn)題

下拉加載一般需要配合throttle限流函數(shù)(原理可以看這里)來(lái)避免頻繁觸發(fā)，所以優(yōu)化代碼成這樣：

然后發(fā)現(xiàn)沒(méi)法用removeEventListener了，因?yàn)檫@個(gè)函數(shù)第二個(gè)參數(shù)不接受匿名函數(shù)。

最后代碼

用一個(gè)變量中轉(zhuǎn)下

云服務(wù)器 GPU云服務(wù)器語(yǔ)言的坑爹設(shè)計(jì) 阿里云服務(wù)器的坑 scrolling scroll

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

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

相關(guān)文章

vue better-scroll 遇到的坑

摘要：先看效果介紹一個(gè)簡(jiǎn)單的靜態(tài)頁(yè)面主要是使用做橫向滾動(dòng)，點(diǎn)擊標(biāo)簽滾動(dòng)到相應(yīng)位置，以及滾到相應(yīng)位置后對(duì)應(yīng)標(biāo)簽顯示紅色。先看效果 showImg(https://segmentfault.com/img/bVbqAdC?w=374&h=626); 介紹一個(gè)簡(jiǎn)單的靜態(tài)頁(yè)面主要是使用 better-scroll 做橫向滾動(dòng)，點(diǎn)擊標(biāo)簽滾動(dòng)到相應(yīng)位置，以及滾到相應(yīng)位置后對(duì)應(yīng)標(biāo)簽顯示紅色。開(kāi)發(fā)過(guò)程中...

yiliang 2019-08-23 16:30 評(píng)論0 收藏0
vux-ui的ViewBox的坑

摘要：鏈接該組件為高布局，可以解決部分鍵盤(pán)輸入的問(wèn)題，但是同時(shí)會(huì)在中出現(xiàn)向下滾動(dòng)時(shí)無(wú)法自動(dòng)隱藏工具欄和底部欄的問(wèn)題。在里元素定位為，效果等同于。鏈接 https://doc.vux.li/zh-CN/comp... 該組件為100%高布局，可以解決部分鍵盤(pán)輸入的問(wèn)題，但是同時(shí)會(huì)在safari中出現(xiàn)向下滾動(dòng)時(shí)無(wú)法自動(dòng)隱藏url工具欄和底部欄的問(wèn)題。在viewBox里元素定位為absolut...

用戶83 2019-08-30 15:55 評(píng)論0 收藏0
vux-ui的ViewBox的坑

摘要：鏈接該組件為高布局，可以解決部分鍵盤(pán)輸入的問(wèn)題，但是同時(shí)會(huì)在中出現(xiàn)向下滾動(dòng)時(shí)無(wú)法自動(dòng)隱藏工具欄和底部欄的問(wèn)題。在里元素定位為，效果等同于。鏈接 https://doc.vux.li/zh-CN/comp... 該組件為100%高布局，可以解決部分鍵盤(pán)輸入的問(wèn)題，但是同時(shí)會(huì)在safari中出現(xiàn)向下滾動(dòng)時(shí)無(wú)法自動(dòng)隱藏url工具欄和底部欄的問(wèn)題。在viewBox里元素定位為absolut...

luodongseu 2019-08-02 13:58 評(píng)論0 收藏0
vux-ui的ViewBox的坑

摘要：鏈接該組件為高布局，可以解決部分鍵盤(pán)輸入的問(wèn)題，但是同時(shí)會(huì)在中出現(xiàn)向下滾動(dòng)時(shí)無(wú)法自動(dòng)隱藏工具欄和底部欄的問(wèn)題。在里元素定位為，效果等同于。鏈接 https://doc.vux.li/zh-CN/comp... 該組件為100%高布局，可以解決部分鍵盤(pán)輸入的問(wèn)題，但是同時(shí)會(huì)在safari中出現(xiàn)向下滾動(dòng)時(shí)無(wú)法自動(dòng)隱藏url工具欄和底部欄的問(wèn)題。在viewBox里元素定位為absolut...

voyagelab 2019-08-23 14:16 評(píng)論0 收藏0
基于better-scroll的vue滾動(dòng)組件

摘要：讓用戶可以滾動(dòng)頁(yè)面。事件中拿到想要的后瀏覽器已經(jīng)隱藏地址欄和工具欄，放開(kāi)插件滾動(dòng)。發(fā)現(xiàn)派發(fā)的方法在父組件中監(jiān)聽(tīng)后獲取位置參數(shù)的效果不太好必須要手指貼著滑動(dòng)才可以這個(gè)設(shè)置為可以實(shí)時(shí)派發(fā)滾動(dòng)事件和位置參數(shù)其他坑點(diǎn)待發(fā)現(xiàn)歡迎大佬一起交流寫(xiě)在前面由于最近一個(gè)移動(dòng)端項(xiàng)目中許多地方有滾動(dòng)需求, 橫向,縱向的都有,所以就基于better-scroll封裝了一個(gè)通用的滾動(dòng)組件,期間也踩了一些坑,有...

xiaotianyi 2019-08-23 18:09 評(píng)論0 收藏0