在專案運行程序中發現,用戶在有左右滑動前進后退的功能的瀏覽器上簽字時,偶然觸發了前進后退會導致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')
這是檔案中核心滾動的介紹,非常輕量,非常適合我們只是簡單的想要解決瀏覽器左右滑動前進后退這一問題,具體用法可以參考檔案,
完結
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/160795.html
標籤:JavaScript
上一篇:聊一聊看似簡單的Promise.prototype.then()方法
下一篇:JS---案例:旋轉木馬
