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

先看演示

演示

说点湿的

Iscroll其实代码量很大(将近2100行，还有一个类似的库，betterScroll，它的代码量和iscroll差不多，因为原理是一样的)。阅读他们的代码

我发现里面很多逻辑其实都是手势判断，比如平移和滑动，还有一些元素(形态元素等)。)需要分别判断和挖掘。这部分代码接近1/3，所以我决定用自己的手势库(any-touch)实现一个iscroll，同时有了文字，大家最终可以用最少的代码实现一个iscroll。

某视频剪辑软件

在观察了一段时间的推荐排名后，我们发现大家都对vue感兴趣，所以这次‘I iscroll’将以vue组件的形式实现。同时也希望借助vue强大的抽象能力，最终的代码能够控制在500行以内。希望大家喜欢。

本文是一系列文章

本文先实现拖放动画，因为这两部分都依赖于手势，所以可以用最少的代码先实现核心功能，大家对后面的内容都有信心。

浅谈iscroll的原理

添加两个div，最里面的div(子div)通过设置css transform的translate值来模拟系统滚动效果。

说逻辑，然后编码

拖动时，通过平移开始/平移手势返回的增量/y改变位置，同时关闭动画效果。发生滑动时，动画打开，通过计算目标位置和动画时间触发滑动动画。密码

div class=' any-scroll-view ' div ref=' body ' : style=' body style ' class=' any-scroll-view _ _ body ' slot/slot/div/div。任意滚动视图{相对位置：宽度： 100%;高度： 90vh飞越：隐藏；_ _车身{过渡-正时-功能：三次贝塞尔曲线(0.1,0.57,0.1,1);背景技术# eee绝对位置：宽度： 100%;高度： 100%;} }从"任意触摸"导入任何触摸；导出默认{ name: '任意滚动视图'，prop : {//减速度，单位px/s加速： { type : Number，default: 3600 } }，data() { return { scrollTop: 0，scrollLeft: 0，transition duration : 300 }；}，计算： { body style(){ return { transitionduration : ` $ { this。transitionduration } ms `，transform : ` translate($ { this。向左滚动} px，$ { this。滚动顶部} px)`}；} },挂载(){ const at=new AnyTouch(这$ El)；//第一次触碰at.on('inputstart '，(ev)={ this。停止滚动()；});//拖拽开始at.on('panstart '，(ev)={ this。移动(ev)；});//拖拽中at.on('panmove '，(ev)={ this。移动(ev)；});//快速滑动at.on('swipe '，(ev)={ this。十年；});这个$on('hook:destroy '，()={ at。销毁()；});}，方法： {//https://github。com/no limits 4 web/Swiper/blob/master/dist/js/Swiper。无害环境管理。js # L87//https://github。com/no limits 4 web/Swiper/blob/master/src/utils/utils。js # L25 getCurrentTranslate(){ const style=getComputedStyle(this .$refs.body，null)；const { transform }=styleconst数组=transform。匹配(/(-？)(d) ( .d{0，})？/g)；返回{ x: Math.round(数组[4])，y:数学圆(数组[5])};}，stopRoll() { const { x，y }=this。getcurrenttranslate()；this.moveTo({ scrollTop: y，向左滚动： x })；}, /** * 移动正文* @param {Object}拖拽产生的数据* @param {Number} deltaX: x轴位移变化* @ param { Number }:y轴位移变化*/move({ deltaX，deltaY }，transitionDuration=0){ this。transitionDuration=transitionDuration；this . scroll left=deltaxthis . scroll top=deltaY }，/** *移动到*/moveTo({ scrollTop，scrollLeft }，过渡持续时间=0){ this。过渡持续时间=过渡持续时间；this.scrollLeft=scrollLeftthis。滚动顶部=滚动顶部；}, /** * 拖拽松手后减速移动至停止* velocityX/Y的单位是px/ms */减速(ev){ const方向标志={向上：-1，向右： 1，向下： 1，向左：-1 }[ev。方向]；//Top？|左？让滚动_后缀=' Top//x？| y？让安讯士_后缀=' Yif(ev。速度x ev。速度y){ SCROLL _后缀=' LeftAXIS _后缀=' X} //减速时间，单位ms//t=(v-v)/a常数速度=ev[`速度$ { axis _后缀} `];这个。transitionduration=数学。圆形(((速度* 1000)/这个。加速度)* 1000)；//滑动距离//s=(v-v)/(2 * a)const scrollaxis=` scroll $ { scroll _后缀} `;这个[scrollAxis]=directionSign * math。圆(数学。功率(速度* 1000，2)/(2 *这个。加速度));} }};总结

以上所述是小编给大家介绍的任何触摸实现一个的使用实现拖拽和滑动动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！