Alloytouch 实现润滑动作

从目前我知道一些框架(如MUI)带有"下拉滑动刷新"的方案，实际上在引用"下拉刷新"这一功能不可能将整一个框架进行引用，因此从腾讯开源中的Alloytouch看到这样润滑动作开源项目，来帮助你实现类似于"下拉刷新".

访问 (github)

DEMO

现在Alloytouch提供了几个DEMO，这可以让你深刻理解它能实现什么，通过下面的地址跳转查看：

Pull To Refresh: http://alloyteam.github.io/AlloyTouch/refresh/pull_refresh/
QQ KanDian: http://alloyteam.github.io/AlloyTouch//refresh/infinite/kandian.html
Full Page Scroll : http://alloyteam.github.io/AlloyTouch/full_page/
Simple : http://alloyteam.github.io/AlloyTouch/example/simple.html
3D : http://alloyteam.github.io/AlloyTouch/example/3d.html
Rotate : http://alloyteam.github.io/AlloyTouch/example/rotate.html
Carousel : http://alloyteam.github.io/AlloyTouch/example/carousel.html
Carousel2 : http://alloyteam.github.io/AlloyTouch/example/carousel2.html
Three.js : http://alloyteam.github.io/AlloyTouch/example/threejs/

导入Alloytouch

我为你们准备了一个github版本地址，以方便测试Alloytouch，你仅仅引用到页面上即可开始。

<script src="https://alloyteam.github.io/AlloyTouch/transformjs/transform.js"></script>
<script src="https://alloyteam.github.io/AlloyTouch/alloy_touch.js"></script>

当然官方也提供CDN:

核心的API (官方的描述)

var alloyTouch = new AlloyTouch({
            touch:"#wrapper",//反馈触摸的dom
            vertical: true,//不必需，默认是true代表监听竖直方向touch
            target: target, //运动的对象
            property: "translateY",  //被运动的属性
            min: 100, //不必需,运动属性的最小值
            max: 2000, //不必需,滚动属性的最大值
            sensitivity: 1,//不必需,触摸区域的灵敏度，默认值为1，可以为负数
            factor: 1,//不必需,表示触摸位移与被运动属性映射关系，默认值是1
            step: 45,//用于校正到step的整数倍
            bindSelf: false,
           maxSpeed: 2, //不必需，触摸反馈的最大速度限制
            initialValue: 0,
            change:function(value){  },
            touchStart:function(evt, value){  },
            touchMove:function(evt, value){  },
            touchEnd:function(evt,value){  },
            tap:function(evt, value){  },
            pressMove:function(evt, value){  },
            animationEnd:function(value){  } //运动结束
})

通过对象的实例可以自行运动DOM:

alloyTouch.to(value, time, ease)

value是必填项
time是非必填项，默认值是600
ease是非必填项，默认值是先加速后减速的运动函数，CSS版本默认值是cubic-bezier(0.1, 0.57, 0.1, 1)

通过对象的实例可以自行停止DOM运动:

alloyTouch.stop()

完整下拉

在这里有一个被单独分离的演示页面，你可以直接参考它，因为它能进行使用

请在真机或模拟环境下进行测试

参考：

https://github.com/AlloyTeam/AlloyTouch

——感谢你的阅读，若有错误请评论中指出

转载注明

转载请注明： 转载自Cabbagelol 后院

本文链接地址: Alloytouch 实现润滑动作

捐助 ↗

博客捐助