vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果


Posted in Javascript onApril 08, 2019

vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果

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

先看demo

demo

说点湿的

 vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果

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)
        );
    }
  }
};

总结

以上所述是小编给大家介绍的vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
面试题:react和vue的区别分析
Apr 08 #Javascript
vue router 组件的高级应用实例代码
Apr 08 #Javascript
JavaScript中的一些实用小技巧总结
Apr 07 #Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 #Javascript
JavaScript数组去重的几种方法
Apr 07 #Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 #Javascript
js中Generator函数的深入讲解
Apr 07 #Javascript
You might like
PHP经典的给图片加水印程序
2006/12/06 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
使用Python绘制图表大全总结
2017/02/11 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
css sprite简单实例
2016/05/23 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
物业管理求职自荐信
2013/09/25 职场文书
工程造价与管理专业应届生求职信
2013/11/23 职场文书
大专护理专业自荐信
2015/03/25 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
祝酒词范文
2015/08/12 职场文书
windows安装python超详细图文教程
2021/05/21 Python