html滑到一个位置显示动画vue,Vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果_旧店_前端开发者...

https://github.com/383514580/any-touch

先看demo

demo

说点湿的

iscroll其实代码量挺大的(近2100行, 还有另一个类似的库betterScroll他的代码量和iscroll差不多, 因为原理都是一样的), 阅读他们的代码

发现里面很多逻辑 其实都是在做手势判断 , 比如拖拽(pan), 和划(swipe), 还有部分元素(表单元素等)需要单独判断点击(tap), 这部分代码接近1/3, 所以我决定用自己开发的手势库(any-touch)实现一个iscroll, 同时配合文字让大家 最终都可以以最少的代码实现一个iscroll .

观察了一段时间推荐排行, 发现大家都对 让最终代码控制在500行以内 , 希望大家喜欢.

本文是个系列文章

本文先实现拖拽和滑动动画, 因为这2部分都依赖 手势 , 借此用最少的代码先实现最核心的功能, 也让大家对后续的内容有信心.

简单说下iscroll原理

添加2个div, 最内的div(子div)通过设置

说完逻辑再说代码

拖拽的时候通过panstart/panmove手势返回的 位移增量 (deltaX/Y)进行位置变化, 同时关闭动画效果.

发生快速划(swipe)的时候, 开启动画, 同时通过计算 目标位置 和 动画时间 来触发滑动动画.

代码

.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/

总结

以上所述是小编给大家介绍的开发者网站的支持！