封裝移動端滾動元件

2021-10-01 03:03:55 字數 680 閱讀 5972

最近專案需要用到下拉重新整理,上拉載入~開始想到better-scroll 畢竟用的人也挺多的,但是,我使用了之後,bug奇奇怪怪,讓我無從下手,去解決,bug就不舉例了~

所以就用了這樣的方法,

-webkit-overflow-scrolling 屬性控制元素在移動裝置上是否使用滾動回彈效果.

auto :使用普通滾動, 當手指從觸控螢幕上移開,滾動會立即停止。

touch :使用具有回彈效果的滾動, 當手指從觸控螢幕上移開,內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立乙個新的堆疊上下文。

-webkit-overflow-scrolling: touch; /* 當手指從觸控螢幕上移開,會保持一段時間的滾動 */

-webkit-overflow-scrolling: auto; /* 當手指從觸控螢幕上移開,滾動會立即停止 */

但是效果還是不是很好,因為我們的資料是很強大的,需要分頁處理,顯然,我這樣不行,

然後,請教一下大佬,大佬,說用自己封裝的外掛程式,然後,我就效仿了一下,效果可以呢~下面貼出**

在methods:, 2000);

}},}

在mounted()

};}data

具體看專案怎麼定義今天就這樣吧~下班。。。

移動端滾動穿透問題

一 body。一般pc端這樣就行了,但在移動端可就不行了,因為他有touchmove。二 可以阻止彈層的touchmove事件,但如果你的彈層內的內容需要滑動,這種方法pass document.body.addeventlistener touchmove function e 三 後來找到乙個比...

移動端禁止觸控滾動

當移動端頁面顯示彈窗時,滑動螢幕,彈窗下方的頁面竟然可以上下滑動 雖然點選不到彈窗下方的內容,但仍然看不習慣 查閱資料後,給整個彈窗設定禁止觸控滾動,如下 由於頁面中存在多個彈窗,所以獲取了所有彈窗,再給每個彈窗設定禁止滾動 var masks document.getelementsbyclass...

移動端常用元件

1.swipeslider.js jquery支援移動端輪播圖外掛程式swipeslider.js view code 2.swiper swiper 移動端觸控滑動外掛程式 手機輪播外掛程式 3.dialog 4.iscroll.js 5.mdate.js 6.sosh 其他 zepto.js 移...