移动端下拉刷新

先搞个DIV

<div class="book_update"></div>

然后就是下拉刷新的代码：

<script>

	$(document).ready(function(){
		var y = 0;
		var h = 0;
		// 如果列表处于顶部，开始监控滑动事件
		if ($(document).scrollTop() == 0){

			// 记录手指初始点击坐标并赋值
			document.addEventListener("touchstart", function(e){
				y = e.changedTouches[0].screenY;
				// console.log(y);
			})
			// 记录手指滑动事件，只针对 Y 坐标 --> 即下拉状态
			document.addEventListener("touchmove", function(e){
				// 只有在顶部时下滑才会生效
				if ($(document).scrollTop() == 0){
					
					// console.log("X--",e.changedTouches[0].screenX);
					// console.log("Y--",e.changedTouches[0].screenY);

					// 判断是否下拉--> 大于是下拉，小于是上滑
					if (e.changedTouches[0].screenY > y){
						// alert("开始刷新");

						// 每下滑一次增加高度 1
						$(".book_update").css("height",h++).show().text("开始刷新..");
						if (h > 30 & h < 50){
							$(".book_update").text("释放可以刷新...");

						}else if (h == 50){							// 当盒子高度为50的时候就可以刷新了 --> 50 为滑动距离
							// 此处与后端交互，取出新数据
							alert("开始刷新");
							$.ajax({
								url: "{% url 'book_city' 1 %}",
								type:"post",
								data: {
									"max_book_len": '{{ len_book_num }}',
								},
								success: function(res){
									
									if (res == 0) {
										console.log(res);
										mui.toast('未查询到新的数据哦',{ duration:'short', type:'div' });
									}else {
										for (var i=0; i<res.length; i++){
											console.log(res);
											mui.toast('已更新'+ res.length +'条数据',{ duration:'short', type:'div' });
											$("#txt_name").text(res[i][0]);
											$("#author").text(res[i][1]);
											$("#details").text(res[i][2]);
											$("#times").text(res[i][3]);
											$("#upload_name").text("上传者：",res[i][4]);
										
									}
									}
									
								}
							})

							// 随后隐藏顶部“开始刷新”标签
							$(".book_update").hide();

							// 重新将高度初始化，否则再次刷新时，高度依旧是50
							h = 0;

						}else{
							// 假如没有滑到 50 就松开了手指
							document.addEventListener("touchend", function(e){
								// 隐藏并初始化高度
								$(".book_update").hide();
								h = 0;
							})
						}
					}
				}
				
			})
		}

	})
</script>

基本功能已经解决，但还是有些小问题，后续再慢慢完善，暂时先这样了

最新更新：判断左右滑动超过15px则不刷新,只有下拉才会执行

<script>

	$(document).ready(function(){
		var x = 0;
		var y = 0;
		var h = 0;
		// 如果列表处于顶部，开始监控滑动事件
		if ($(document).scrollTop() == 0){

			// 记录手指第一次点击的坐标并赋值
			document.addEventListener("touchstart", function(e){
				y = e.changedTouches[0].screenY;
				x = e.changedTouches[0].screenX;
				// console.log(y);
				// console.log(x);
			})
			// 记录手指滑动事件，只针对 Y 坐标 --> 即下拉状态
			document.addEventListener("touchmove", function(e){
				// 只有在顶部时下拉才会生效
				if ($(document).scrollTop() == 0){
					
					// console.log("X--",e.changedTouches[0].screenX);
					// console.log("Y--",e.changedTouches[0].screenY);
					
					if (e.changedTouches[0].screenY > y ){			// 判断是否下滑--> 大于是下拉，小于是上滑
						// 判断是否左滑或者右滑了
						if (e.changedTouches[0].screenX - x > 15 | x - e.changedTouches[0].screenX > 15){
							// 隐藏
							$(".book_update").hide();

							// 重新将高度初始化，否则再次刷新时，高度依旧是之前滑动的高度
							h = 0;
						}else {
							// 每下滑一次增加高度 1
							$(".book_update").css("height",h++).show().text("开始刷新..");
							if (h > 30){							// 当盒子高度大于30的时候就可以刷新了 --> 30 为滑动距离
								$(".book_update").text("释放可以刷新...");
							}else{
								// 假如没有滑到 30 就松开了手指
								document.addEventListener("touchend", function(e){
									// 隐藏并初始化
									$(".book_update").hide();
									h = 0;
								})
							}
						}
						
					}
				}
				
			})
		} 
		// 监控手指停止下拉动作
		document.addEventListener("touchend", function(){
			// 当下拉超过 30 的高度并松开了手指则执行这里
			if (h > 30) {
				// var htmlstr = ""
				$(".book_update").text("正在刷新...");
				// 2秒后隐藏并初始化高度
				setTimeout(function(){
					$(".book_update").hide();
					h = 0;
				}, 2000);
				// 此处执行与后端交互的数据
			}
			
		})
		
		

	})
</script>

js完全是半桶水，代码可能看起来不伦不类的，setTimeout不知道为什么没有生效，不过问题不大，已经能正常下拉刷新了