在项目运行过程中发现, 用户在有左右滑动前进后退的功能的浏览器上签字时, 偶然触发了前进后退会导致 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/[email protected] --save
- import BScroll from '@better-scroll/core'
- const bs = new BScroll('.div')
这是文档中核心滚动的介绍, 非常轻量, 非常适合我们只是简单的想要解决浏览器左右滑动前进后退这一问题, 具体用法可以参考文档.
完结
来源: http://www.bubuko.com/infodetail-3345836.html