.any-scroll-view {   position: relative;   width: 100%;   height: 90vh;    overflow: hidden;   &__body {     transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);     background: #eee;     position: absolute;     width: 100%;     height: 100%;   } } import AnyTouch from 'any-touch'; export default {   name: 'any-scroll-view',   props: {     // 减速度, 单位px/s²     acceleration: {       type: Number,       default: 3600     }   },   data() {     return {       scrollTop: 0,       scrollLeft: 0,       transitionDuration: 300     };   },   computed: {     bodyStyle() {       return {         transitionDuration: `${this.transitionDuration}ms`,         transform: `translate(${this.scrollLeft}px, ${           this.scrollTop         }px)`       };     }   },   mounted() {     const at = new AnyTouch(this.$el);     // 第一次触碰     at.on('inputstart', (ev) => {       this.stopRoll();     });     // 拖拽开始     at.on('panstart', (ev) => {       this.move(ev);     });     // 拖拽中     at.on('panmove', (ev) => {       this.move(ev);     });     // 快速滑动     at.on('swipe', (ev) => {       this.decelerate(ev);     });     this.$on('hook:destroy', () => {       at.destroy();     });   },   methods: {     // https://github.com/nolimits4web/swiper/blob/master/dist/js/swiper.esm.js#L87     // https://github.com/nolimits4web/Swiper/blob/master/src/utils/utils.js#L25     getCurrentTranslate() {       const style = getComputedStyle(this.$refs.body, null);       const { transform } = style;       const array = transform.match(/(\-?)(\d)+(\.\d{0,})?/g);       return { x: Math.round(array[4]), y: Math.round(array[5]) };     },     stopRoll() {       const { x, y } = this.getCurrentTranslate();       this.moveTo({ scrollTop: y, scrollLeft: x });     },     /**      * 移动body      * @param {Object} 拖拽产生的数据      * @param {Number} deltaX: x轴位移变化      * @param {Number} deltaY: y轴位移变化      */     move({ deltaX, deltaY }, transitionDuration = 0) {       this.transitionDuration = transitionDuration;       this.scrollLeft += deltaX;       this.scrollTop += deltaY;     },     /**      * 移动到      */     moveTo({ scrollTop, scrollLeft }, transitionDuration = 0) {       this.transitionDuration = transitionDuration;       this.scrollLeft = scrollLeft;       this.scrollTop = scrollTop;     },     /**      * 拖拽松手后减速移动至停止      * velocityX/Y的单位是px/ms      */     decelerate(ev) {       const directionSign = { up: -1, right: 1, down: 1, left: -1 }[         ev.direction       ];       // Top? | Left?       let SCROLL_SUFFIX = 'Top';       // x ? | y?       let AXIS_SUFFIX = 'Y';       if (ev.velocityX > ev.velocityY) {         SCROLL_SUFFIX = 'Left';         AXIS_SUFFIX = 'X';       }       // 减速时间, 单位ms       // t = (v₂ - v₁) / a       const velocity = ev[`velocity${AXIS_SUFFIX}`];       this.transitionDuration = Math.round(         ((velocity * 1000) / this.acceleration) * 1000       );       // 滑动距离       // s = (v₂² - v₁²) / (2 * a)       const scrollAxis = `scroll${SCROLL_SUFFIX}`;       this[scrollAxis] +=         directionSign *         Math.round(           Math.pow(velocity * 1000, 2) / (2 * this.acceleration)         );     }   } };

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

以上是“vue+any-touch如何实现一个iscroll拖拽和滑动动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

当前名称：vue+any-touch如何实现一个iscroll拖拽和滑动动画效果
本文URL：http://cqcxhl.cn/article/jdeded.html