共计 3079 个字符，预计需要花费 8 分钟才能阅读完成。
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)
);
}
}
};
下一期
大家也发现了, 只有页面在滚动, 没有滚动条, 所以下期我们讲如何给 scroll-view 加上滚动条.
有不明白的地方
请留言, 知无不言, 言无不尽. 如觉得本文对您有帮助, 就请给 any-touch 一个 star 吧, 谢谢.