查看: 242|回复: 0

[HTML代码] 移动端touch事件 || 上拉加载更多

发表于 7 天前
前言:

说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉

实现加载更多的插件。然后就留下了个坑:上拉加载的时候会由于用户错误的姿势,例如长按后再touchmove等会出现卡死的假象。(ps:当然,

我不认为是插件的问题,当时的想法是觉得引用的插件存在冲突),于是,我就直接通过封装touch事件完成上拉加载实现分页的功能。

备注:文章最后会加上为实现这个功能我找的一些插件

了解touch事件

在应用touch事件实现上拉加载更多实现分页的效果上,其实我们用到的只有touchstart,touchmove,touchend,touchcancel事件,还有targetTouches[0]

和changedTouches[0]属性即可完成简单的分页效果。

了解更多touch事件的方法可以访问:

https://developer.mozilla.org/zh-CN/docs/Web/API/Touch

touch事件需要注意事项

在执行touch事件的时候,在大多数情况下我们需要注意的就是阻止浏览器的默认行为,例如滚动事件或者浏览器的缩放,可以通过html页面加上meta标签禁止

用户缩放:,然后

在touch事件上加上event.preventDefault()阻止默认事件。

上代码

通过基于zepto简单的封装了touch事件上拉加载更多的效果。

  1. 1 ;(function ($,window,undefined) {
  2. 2 var userDefinedSlide={
  3. 3 isSupportTouch:"ontouchstart" in document ? true :false,
  4. 4 startPos:{},//touchstart的位置信息
  5. 5 endPos:{},//touchmove的位置信息
  6. 6 upOrDown:'',//up:为上拉加载,down为下拉刷新
  7. 7 winHigh:0,//浏览器的高度,
  8. 8 docHigh:0,//文档的高度,对应于页面总高度
  9. 9 scrollHigh:0,//滚动的高度
  10. 10 notDefault:false,//是否阻止默认行为
  11. 11 //docHigh=winHigh+scrollHigh
  12. 12 init:function(){
  13. 13 if(!this.isSupportTouch){
  14. 14 console.warn('touch events are not supported at current device');
  15. 15 }else{
  16. 16 this.touchEvents();
  17. 17 }
  18. 18 },
  19. 19 touchEvents:function(){
  20. 20 var that=this;
  21. 21 $("body").on("touchstart",function (e) {
  22. 22 var touch=e.targetTouches[0];
  23. 23 that.startPos={
  24. 24 x:touch.pageX,
  25. 25 y:touch.pageY,
  26. 26 time:+new Date()
  27. 27 };
  28. 28 that.winHigh=$(window).height();//可视窗口高度
  29. 29 that.docHigh=$(document).height();//总高度
  30. 30 that.scrollHigh=$(window).scrollTop();//滚动高度
  31. 31 });
  32. 32 $("body").on("touchmove",function (e) {
  33. 33 if(that.notDefault){
  34. 34 e.preventDefault();
  35. 35 }
  36. 36 var touch=e.targetTouches[0];
  37. 37 that.endPos={
  38. 38 x:touch.pageX,
  39. 39 y:touch.pageY,
  40. 40 time:+new Date()
  41. 41 };
  42. 42 that.upOrDown=that.endPos.y-that.startPos.y;
  43. 43 });
  44. 44 $("body").on("touchend touchcancel",function (e) {
  45. 45 if(that.upOrDown < 0 && that.docHigh<=(that.winHigh+that.scrollHigh)){
  46. 46 console.log('is to bottom');
  47. 47 //可执行动画效果
  48. 48 setTimeout(function(){
  49. 49 //需要异步加载数据放置位置
  50. 50 //若执行动画,则加载数据后移除动画效果
  51. 51 },1000);
  52. 52 }
  53. 53 })
  54. 54 }
  55. 55 };
  56. 56 userDefinedSlide.init();
  57. 57 })( Zepto ,window,undefined);
复制代码

而基于是在touchmove事件执行获取触摸位置还在touchend/touchcancel事件执行获取触摸位置则我没有过多的考究。

要在touchend/touchcancel事件获取触摸位置的话则需要将var touch=e.targetTouches[0];调整为var touch=e.changedTouches[0];

因为,touchend/touchcancel事件没有targetTouches属性,只有changedTouches属性。

可能有人存在疑惑,为啥要绑定touchend和touchcancel两个事件呢,个人事件,发现在部分安卓手机上会在touchend事件上有bug,不能

执行,所以通过执行touchcancel事件:当系统停止跟踪触摸的时候触发,来达到touchend的效果。

通过我上面对touch事件的简单封装就可实现上拉加载更多实现分页的效果了。

更多上拉加载更多、下拉刷新插件:

dropload:https://github.com/ximan/dropload

iScroll:https://github.com/cubiq/iscroll

swiper:https://github.com/nolimits4web/Swiper(ps:swiper也可实现上拉加载更多)

mescroll:http://www.mescroll.com/

另:我文章开头提到的使用插件存在的bug,有知道的大神可以留言给我喔,再次谢过先了。



回复

使用道具 举报