mint-loadmore報錯 Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.


vue mint-ui框架 在使用mt-loadmore時 滾動到底部,報錯如下:

 

大概意思呢就是:一個有設置cancelable=false的touchmove事件和其他某個滾動的操作沖突了。

解決方法:

在滾動的標簽外層 添加 touch-action: none 樣式,即在mt-loadmore的父元素(或全局設置)上添加此屬性。

 

 touch-action 的屬性值及其含義

touch-action設置觸摸屏用戶如何操縱元素的區域  (例如,瀏覽器內置的縮放功能)。

touch-action: auto;  /* 初始值 當觸控事件發生在元素上時,由瀏覽器來決定進行哪些操作,比如對viewport進行平滑、縮放等 */ touch-action: none;  /* 當觸控事件發生在元素上時,不進行任何操作 */ touch-action: pan-x;  /* 啟用單指水平平移手勢 */ touch-action: pan-left;  /* */ touch-action: pan-right; touch-action: pan-y;  /* 啟用單指垂直平移手勢 */ touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom;  /* 啟用多手指平移和縮放頁面。 這可以與任何平移值組合。 */ touch-action: manipulation;  /* 瀏覽器只允許進行滾動和持續縮放操作。 */ /* Global values */ touch-action: inherit; touch-action: initial; touch-action: unset;

最常見的用法:

  1、touch-action: none  禁用元素(及其不可滾動的后代)上的所有手勢,使用自己提供的拖放和縮放功能(地圖或游戲中)

   2、touch-action: pan-y pinch-zoom 使用指針事件處理水平平移的圖像輪播,但不想干擾網頁的垂直滾動或縮放。

   3、touch-action: manipulation 用於完全解決由支持雙擊縮放手勢引起的點擊事件的延遲。

pan-x:可以與 pan-y 、pan-up、pan-down 和/或 pinch-zoom 組合使用。

pan-y:可以與 pan-x 、pan-left 、pan-right 和/或 pinch-zoom 組合使用。

manipulation:任何其它被auto值支持的行為不被支持。啟用平移和縮小縮放手勢,但禁用其他非標准手勢,例如雙擊以進行縮放。 禁用雙擊可縮放功能可減少瀏覽器在用戶點擊屏幕時延遲生成點擊事件的需要。 這是“pan-x pan-y pinch-zoom”(為了兼容性本身仍然有效)的別名。

pan-left,pan-right,pan-up,pan-down ]:啟用以指定方向滾動開始的單指手勢。 一旦滾動開始,方向可能仍然相反。 請注意,滾動“向上”(pan-up)意味着用戶正在將其手指向下拖動到屏幕表面上,同樣 pan-left 表示用戶將其手指向右拖動。 多個方向可以組合,除非有更簡單的表示(例如,“pan-left pan-right”無效,因為“pan-x”更簡單,而“pan-left pan-down”有效)。

 

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM