vue + any-touch实现一个iscroll ? - (1) 实现拖拽和滑动动画
https://github.com/383514580/any-touch先看demodemo说点湿的本文代码非常简单, 请不要被系统预估的阅读时间误导.iscroll其实代码量挺大的(近2100行, 还有另一个类似的库betterScroll他的代码量和iscroll差不多, 因为原理都是一样的), 阅读他们的代码发现里面很多逻辑其实都是在做手势判断, 比如拖拽(pan), 和划(swipe), 还有部分元素(表单元素等)需要单独判断点击(tap), 这部分代码接近1/3, 所以我决定用自己开发的手势库(any-touch)实现一个iscroll, 同时配合文字让大家最终都可以以最少的代码实现一个iscroll.vue观察了一段时间推荐排行, 发现大家都对vue感兴趣, 所以本次的"iscroll"将以vue组件的形式实现, 同时我也希望借助vue强大的抽象能力, 让最终代码控制在500行以内, 希望大家喜欢.本文是个系列文章本文先实现拖拽和滑动动画, 因为这2部分都依赖手势, 借此用最少的代码先实现最核心的功能, 也让大家对后续的内容有信心.简单说下iscroll原理添加2个div, 最内的div(子div)通过设置css的transform的translate的值来模拟系统滚动效果.说完逻辑再说代码拖拽的时候通过panstart/panmove手势返回的位移增量(deltaX/Y)进行位置变化, 同时关闭动画效果.发生快速划(swipe)的时候, 开启动画, 同时通过计算目标位置和动画时间来触发滑动动画.代码<div class=“any-scroll-view”> <div ref=“body” :style=“bodyStyle” class=“any-scroll-view__body”><slot></slot></div></div>.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) ); } }};下一期大家也发现了, 只有页面在滚动, 没有滚动条, 所以下期我们讲如何给scroll-view加上滚动条.有不明白的地方请留言, 知无不言, 言无不尽. 如觉得本文对您有帮助, 就请给any-touch一个star吧, 谢谢. ...