一段有关Touch设备的Javascript代码

最新推荐文章于 2024-11-26 14:12:45 发布

原创最新推荐文章于 2024-11-26 14:12:45 发布 · 441 阅读

1 ·

CC 4.0 BY-SA版权

前端技术专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用触摸事件实现列表滑动加载更多数据的方法。通过监听touchstart、touchmove和touchend事件来获取用户的滑动距离，并据此更新列表的位置。当用户上滑且列表已到达顶部时，会触发异步请求加载新数据并插入到列表中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// SignIn JavaScript Document
$(function(){
 var touch = {
 touch:null,
 startY:0,
 endY:0,
 moveY:0
 };
 touch.start = function(event){
 event.preventDefault();
 this.touch = event.touches[0];
 this.startY = this.touch.clientY;
 }
 touch.move = function(event){
 event.preventDefault();
 this.touch = event.touches[0];
 }
 touch.end = function(event){
 event.preventDefault();
 this.endY = this.touch.clientY;
 this.moveY = this.endY - this.startY;
 $("ul.datalist").animate({marginTop:'+=' + this.moveY + 'px'});
 if(this.moveY >= 0 & parseInt($("ul.datalist").css("marginTop")) >= 0){
 $.ajax({
 async:true,
 type:"POST",
 url:"1.php",
 dataType:"json",
 success: function(data){
 for(i=0;i<data.length;i++){
 $("<li>" + data[i].name + "123</li>").insertBefore($("ul.datalist li:first"));
 }
 $("ul.datalist").animate({marginTop:0});
 },
 error: function(){
 console.log("异步错误");
 }
 });
 }
 if(parseInt($("ul.datalist").css("marginTop")) + this.moveY > 0)
 $("ul.datalist").animate({marginTop:0});
 }
 $("ul.datalist").get(0).addEventListener("touchstart",touch.start,false);
 $("ul.datalist").get(0).addEventListener("touchmove",touch.move,false);
 $("ul.datalist").get(0).addEventListener("touchend",touch.end,false);
});