移动端下拉刷新，向后台请求数据

首先说明，下拉刷新有两种情况：

一，重新刷新整个页面.window.location.reload()，这种方式也可以做到，前提是进入页面也是直接从后台取数据，这种方法较简单；

二，下拉后不刷新页面，只是向后台发送ajax请求，这种情况就复杂点，会存在服务端返回数据重复的情况，这个时候一般需要服务端返回一个参数，供客户端判断；

下面是自己js手写下拉刷新代码：（一些博客、论坛有别人写好的，可修改使用）

css

.loading {display: inline-block;height: 15px;width: 15px;border-radius: 100%;margin: 6px;border: 2px solid #666;border-bottom-color: transparent;vertical-align: middle;-webkit-animation: rotate 0.75s linear infinite;animation: rotate 0.75s linear infinite;
}@-webkit-keyframes rotate {0% {-webkit-transform: rotate(0deg);}50% {-webkit-transform: rotate(180deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes rotate {0% {transform: rotate(0deg);}50% {transform: rotate(180deg);}100% {transform: rotate(360deg);}
}

 1 function update(element) {
 2                 var start = 0,
 3                     end = 0,
 4                     ele = $(element)[0];//DOM对象转化为jQuery对象
 5                 ele.addEventListener("touchstart", touchstart, false);
 6                 ele.addEventListener("touchmove", touchmove, false);
 7                 ele.addEventListener("touchend", touchend, false);
 8
 9                 $('<div class="update">↓下拉刷新</div>').prependTo($("body"));
10
11                 function touchstart(ev) {
12                     var touch = ev.targetTouches[0];
13                     start = touch.pageY;
14                 }
15
16                 function touchmove(ev) {
17                     var touch = ev.targetTouches[0];
18                     end = start - touch.pageY;
19                     $(this).css("top", (-end + "px"))
20                     if(end < 0 && $(document).scrollTop() == 0) {
21                         $(".update").show();
22                         end > -60 ? $(".update").html('↓下拉刷新') : $(".update").html('↑释放更新 ');
23                     }
24                 }
25
26                 function touchend(ev) {
27                     if(parseInt(end) < 0 && $(document).scrollTop() == 0) {
28                         $(".update").html('<span class="loading"></span>加载中...');
29                         //GetList(obj);向后台请求数据
30                         window.location.reload();//刷新整个页面
31                         setTimeout(function() {
32                             $(".update").remove();
33                             ele.css('top',0);
34                         }, 2500);
35                     }
36                 }
37             }

转载于:https://www.cnblogs.com/web-wjg/p/7423117.html

移动端下拉刷新，向后台请求数据相关推荐

Vant-ui 移动端下拉刷新
这个是基于上一篇文章,上拉加载更多,继续的下拉刷新这里面利用到了 vant组件库里的 PullRefresh 下拉刷新时会触发 refresh 事件,在事件的回调函数中可以进行同步或异步操作,操作完 ...
html下拉刷新原理,科技常识：移动端下拉刷新头实现原理及代码实现
科技常识:移动端下拉刷新头实现原理及代码实现 2021-05-24 21:23:20 • 互联网今天小编跟大家讲解下有关移动端下拉刷新头实现原理及代码实现 ,相信小伙伴们对这个话题应该有所关注吧,小 ...
[ vant ] vue移动端下拉刷新组件
学习关键语句: vant list组件和下拉刷新 vant 下拉刷新和局部滚动冲突写在前面每一次 ! 我是说每一次我在使用 vant 组件库里面 list组件和下拉刷新连在一起用的时候都会出现下 ...
移动端下拉刷新infinitescroll
使用的是infinitescroll 移动端手机下拉刷新数据第一步:在serviceList.html导入 <script src="/js/jquery.infinitescrol ...
移动端下拉刷新原理和实例
移动端的下拉刷新是一个很常见的功能,也有许多开源库实现了这个功能,不过为了学习,还是先自己写一个例子学习一下.其中用到了一些touch事件和一些DOM属性CSS3属性.直接上代码,代码里面有注释. & ...
移动端下拉刷新，兼容ios，Android及微信浏览器
先看一下效果图下拉效果的样子参考的新浪微博,滚动加载是ydui的滚动加载组件因为滚动加载使用的ydui的组件,我这里便不再累述在线体验点这里首先分析下拉刷新是怎么实现的 1.页面滚动到顶部时, ...
移动端下拉刷新与页面内滑动冲突问题 iscroll 固定行表头苹果下拉反弹
此方法在安卓6的自带下拉刷新的APP内无效. 做移动app项目时,用的是app内嵌webview的方法,遇到问题. 在安卓6中,app原生自带下拉刷新,与界面内的下滑冲突. 开始考虑通过在touchm ...
vue移动端下拉刷新、上拉加载
由于自身的项目比较简单,只有几个H5页面,用来嵌入app中,所有没有引入移动端的UI框架,但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载,有更好的用户体验,自己写组件实现. 1.下拉刷新Drop ...
vue移动端下拉刷新组件、上拉加载组件
1.下拉刷新DropDownRefresh.vue <template> <div @touchstart="touchStart($event)" @touch ...
uinapp下拉刷新，更新列表数据
<template><view class="index_container"><view class="index_search_con& ...

移动端下拉刷新，向后台请求数据

移动端下拉刷新，向后台请求数据相关推荐

最新文章

热门文章