vue + any-touch实现一个iscroll ? - (1) 实现拖拽和滑动动画-白红宇

先看demo

本次文章先实现内容拖拽和滑动动画, 后续文章一步一步增加功能, 比如滚动条/ 下拉加载等功能.

说点湿的

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)的时候, 开启动画, 同时通过计算目标位置和动画时间来触发滑动动画.

代码

.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加上滚动条.

有不明白的地方

请留言, 知无不言, 言无不尽. 如觉得本文对您有帮助, 就请给一个star吧, 谢谢.