在項目運行過程中發現,用戶在有左右滑動前進後退的功能的瀏覽器上簽字時,偶然觸發了前進後退會導致canvas像是重置了一樣內容消失,所以需要在代碼中處理這種情況。 基本原理就是在touchmove事件中阻止預設事件,使瀏覽器不會觸發前進後退事件,但是也會無法觸發scroll事件讓頁面正常滾動,後續如何 ...
在項目運行過程中發現,用戶在有左右滑動前進後退的功能的瀏覽器上簽字時,偶然觸發了前進後退會導致canvas像是重置了一樣內容消失,所以需要在代碼中處理這種情況。
基本原理就是在touchmove事件中阻止預設事件,使瀏覽器不會觸發前進後退事件,但是也會無法觸發scroll事件讓頁面正常滾動,後續如何讓頁面能正常滾動就會有多種思路。
參考https://www.cnblogs.com/Miracle-ZLZ/p/7852421.html文中第5點推薦使用IScroll,但看了一下github發現太久沒有更新了,我就用了基於IScroll的better-scroll,文檔:https://better-scroll.github.io/docs/zh-CN/guide/base-scroll.html
在 BetterScroll 2.0 的設計當中,我們抽象了核心滾動部分,它作為 BetterScroll 的最小使用單元,壓縮體積比 1.0 小了將近三分之一,往往你可能只需要完成一個純粹的滾動需求,那麼你只需要引入這一個庫,方式如下:
npm install @better-scroll/core@next --save
import BScroll from '@better-scroll/core'
const bs = new BScroll('.div')
這是文檔中核心滾動的介紹,非常輕量,非常適合我們只是簡單的想要解決瀏覽器左右滑動前進後退這一問題,具體用法可以參考文檔。
完結