Vue移动端H5手势缩放滚动拖拽插件Easyscroller |
您所在的位置：网站首页 › vue实现图片放大缩小旋转 › Vue移动端H5手势缩放滚动拖拽插件Easyscroller |
Vue移动端H5手势缩放滚动拖拽插件Easyscroller
|
最近为了实现移动端-手势放大缩小DOM元素又能滚动拖拽的功能，发现很多插件都是只能用于单纯单个图片的放大缩小，可是我的需求是需要拖拽整个DOM元素的，找来找去，最后总算发现了一个非常好用的插件Easyscroller，也算是满足我的业务需求！！！发现用的人好像不是很多，所以发个博客向大家介绍介绍！！ Github地址↓↓↓ https://github.com/ulesta/easyscroller NPM地址↓↓↓ https://www.npmjs.com/package/easyscroller 先看一下官网的效果，看一下能不能满足大家的需求~ 使用方法： 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(); #container { background-color: #fff; border: 5px solid #000; height: 320px; margin: 10% auto 0 auto; overflow: hidden; width: 80%; position: relative; } 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.官方介绍的配置项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 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的介绍，欢迎大家分享其他更好用的插件！！！ |
github上面有这个效果的GIF图，大家可以过去看一下~【本文地址】
今日新闻 |
推荐新闻 |