介绍 & lt; div 类=癮ny-scroll-view"比;
& lt;才能div ref=癰ody",:,类=癮ny-scroll-view__body"祝辞& lt; slot> & lt;/slot> & lt;/div>
& lt;/div>
.any-scroll-view {
位置:,才能相对;
,,宽度:100%;
,,身高:90 vh,,
,,溢出:隐藏。
,才能__body {
,,,transition-timing-function:, cubic-bezier (0.1, 0.57, 0.1, 1);
,,,背景:,# eee;
,,,位置:,绝对;
,,,宽度:,100%;
,,,身高:,100%;
,,}
}
import AnyTouch 得到& # 39;any-touch& # 39;;
export default {
,,名字:& # 39;any-scroll-view& # 39;
,,道具:{
,,,//,减速度,,单位px/s& sup2;
,,,:加速度,{
,,,,,类型:,,
,,,,,默认值:3600
,,,}
,,},
数据才能(),{
,,,return {
,,,,,scrollTop:, 0,
,,,,,scrollLeft:, 0,
,,,,,transitionDuration: 300
,,,};
,,},
计算才能:{
,,,bodyStyle (), {
,,,,,return {
,,,,,,,transitionDuration:,“$ {this.transitionDuration}女士”,
,,,,,,,变换:,“翻译($ {this.scrollLeft} px, $ {
,,,,,,,,this.scrollTop
,,,,,,,}px)”
,,,,,};
,,,}
,,},
安装(),{才能
,,,const at =, new AnyTouch(这一点。el美元);
,,,//,第一次触碰
,,,at.on (& # 39; inputstart& # 39;,, (ev),=祝辞,{
,,,,,this.stopRoll ();
,,,});
,,,//,拖拽开始
,,,at.on (& # 39; panstart& # 39;,, (ev),=祝辞,{
,,,,,this.move (ev);
,,,});
,,,//,拖拽中
,,,at.on (& # 39; panmove& # 39;,, (ev),=祝辞,{
,,,,,this.move (ev);
,,,});
,,,//,快速滑动
,,,at.on(& # 39;滑动# 39;,,(ev),=祝辞,{
,,,,,this.decelerate (ev);
,,,});
,,,,美元(& # 39;钩:摧毁# 39;,,(),=祝辞,{
,,,,,at.destroy ();
,,,});
,,},
方法:才能,{
,,,//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(这一点。refs.body美元,零);
,,,,,const {, transform },=,风格;
,,,,,const array =, transform.match (/(\ - ?) (\ d) + (\ \ d {0}) ?/g);
,,,,,return {, x: Math.round(阵列[4]),y:, Math.round(阵列[5]),};
,,,},
,,,stopRoll (), {
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下vue +任何触摸如何实现一个iscroll拖拽和滑动动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
效果
, 
iscroll其实代码量挺大的(近2100行,还有另一个类似的库<代码> betterScroll 他的代码量和iscroll差不多,因为原理都是一样的),阅读他们的代码
发现里面很多逻辑其实都是在做手势判断,比如拖拽(锅),和划(刷卡),还有部分元素(表单元素等)需要单独判断点击(tap),这部分代码接近1/3,所以我决定用自己开发的手势库(任何触摸)实现一个iscroll,同时配合文字让大家<强>最终都可以以最少的代码实现一个iscroll。
<强> vue
观察了一段时间推荐排行,发现大家都对vue感兴趣,所以本次的“iscroll"将以vue组件的形式实现,同时我也希望借助vue强大的抽象能力,<强>让最终代码控制在500行以内强,希望大家喜欢。
<>强本文是个系列文章
本文先实现拖拽和滑动动画,因为这2部分都依赖手势,借此用最少的代码先实现最核心的功能,也让大家对后续的内容有信心。
<强>简单说下iscroll原理
添加2个div,最内的div(子div)通过设置css的变换的转换的值来模拟系统滚动效果。
<>强说完逻辑再说代码
拖拽的时候通过panstart/panmove手势返回的位移增量(△/Y)进行位置变化,同时关闭动画效果。
发生快速划(刷卡)的时候,开启动画,同时通过计算目标位置和动画时间来触发滑动动画。
代码
