Vue移动端H5手势缩放滚动拖拽插件Easyscroller

最近为了实现移动端-手势放大缩小DOM元素又能滚动拖拽的功能，发现很多插件都是只能用于单纯单个图片的放大缩小，可是我的需求是需要拖拽整个DOM元素的，找来找去，最后总算发现了一个非常好用的插件Easyscroller，也算是满足我的业务需求！！！发现用的人好像不是很多，所以发个博客向大家介绍介绍！！

Github地址↓↓↓
https://github.com/ulesta/easyscroller
NPM地址↓↓↓
https://www.npmjs.com/package/easyscroller

先看一下官网的效果，看一下能不能满足大家的需求~
在这里插入图片描述
github上面有这个效果的GIF图，大家可以过去看一下~

使用方法：
npm i easyscroller --save

import { EasyScroller } from 'easyscroller'
 
const element = document.querySelector('#scroll-content');
 
new EasyScroller(element, {
  scrollingX: true,
  scrollingY: true,
  zooming: true,
  minZoom: 1,
  maxZoom: 3.0,
  zoomLevel: 1.4
});
 
...
// Don't forget to clean up later!记得销毁实例
scroller.destroy();

<head>
  <style>
    #container {
      background-color: #fff;
      border: 5px solid #000;
      height: 320px;
      margin: 10% auto 0 auto;
      overflow: hidden;
      width: 80%;
      position: relative;
    }
  </style> 
</head>
 
<body>
  <div id="container">
    <div id="scroll-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut eros sodales, pulvinar magna sed, lacinia enim.
      Nullam gravida mauris id condimentum mattis. Vestibulum a volutpat justo. Nullam elementum enim a dui pharetra
      ullamcorper. Phasellus eget massa ac eros fermentum porttitor. Praesent pulvinar eget lorem at euismod. Sed
      pulvinar justo vel sapien aliquam, vel finibus leo luctus. Etiam ac lorem id odio accumsan auctor. Pellentesque
      sem odio, viverra nec ex et, vehicula pulvinar tellus. Ut id blandit quam. Morbi maximus congue sagittis.
    </div>
  </div>
</body>

官方介绍的配置项Options

/** Enable scrolling on x-axis */
scrollingX?: boolean;

/** Enable scrolling on y-axis */
scrollingY?: boolean;

/** Enable animations for deceleration, snap back, zooming and scrolling */
animating?: boolean;

/** duration for animations triggered by scrollTo/zoomTo */
animationDuration?: number;

/** Enable bouncing (content can be slowly moved outside and jumps back after releasing) */
bouncing?: boolean;

/** Enable locking to the main axis if user moves only slightly on one of them at start */
locking?: boolean;

/** Enable pagination mode (switching between full page content panes) */
paging?: boolean;

/** Enable snapping of content to a configured pixel grid */
snapping?: boolean;

/** Enable zooming of content via API, fingers and mouse wheel 是否打开缩放功能*/
zooming?: boolean;

/** Initial zoom level, must be >= minZoom and <= maxZoom 初始缩放比例*/
zoomLevel?: number;

/** Minimum zoom level 最小缩放比例*/
minZoom?: number;

/** Maximum zoom level 最大缩放比例*/
maxZoom?: number;

/** Multiply or decrease scrolling speed **/
speedMultiplier?: number;

/** Callback that is fired on the later of touch end or deceleration end,
  provided that another scrolling action has not begun. Used to know
  when to fade out a scrollbar. */
scrollingComplete?: () => void;

/** This configures the amount of change applied to deceleration when reaching boundaries  **/
penetrationDeceleration?: number;

/** This configures the amount of change applied to acceleration when reaching boundaries  **/
penetrationAcceleration?: number;

PS：使用的过程中，我发现这个插件的兼容性有点问题——在IOS上放大的时候图片质量很模糊，网上查了说在源码里面去除translateZ的属性，但是我试了并没有用，于是又找了另一种解决方法——如下：

mounted() {
 const ele = document.querySelector('#zoomBox');

  this.scroller = new EasyScroller(ele, {
    scrollingX: true,
    scrollingY: true,
    zooming: true,
    minZoom: 0.5,
    maxZoom: 5,
    zoomLevel: 0.5,
    bouncing: false,
  });
},
beforeDestroy() {
  this.scroller.destroy();
},

 .image-box {
    overflow: auto;
     /*ios放大图片模糊问题的兼容*/
     width: 200%;
     transform: translate3d(-50%, -50%, 0) scale(0.5, 0.5);
     -webkit-transform: translate3d(-50%, -50%, 0) scale(0.5, 0.5);
     -moz-transform: translate3d(-50%, -50%, 0) scale(0.5, 0.5);
     -ms-transform: translate3d(-50%, -50%, 0) scale(0.5, 0.5);
     img {
       width: 100%;
     }
   }

以上就是插件Easyscroller的介绍，欢迎大家分享其他更好用的插件！！！

Vue移动端H5手势缩放滚动拖拽插件Easyscroller

悦读