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

2020-11-27 来源：意榕旅游网

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

先看demo

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

<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 实现拖拽和滑动动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

显示全文

全部栏目

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